程序员经验分享-hwhale

ag-grid在Vue项目中的基本使用

2023-10-29

ag-grid官网

1、安装

npm install ag-grid-community ag-grid-vue --save-dev

2、在main.js中引入ag-grid的样式文件

// 引入ag-grid的样式文件
import '../node_modules/ag-grid-community/dist/styles/ag-grid.css';
import '../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css';

3、在Vue组建中的基本使用

<template>
  <div>
    <!-- columnDefs表头  rowData表格数据-->
    <!-- ag-theme-balham 是ag-grid自带的表格样式类 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

4、设置表格列宽可以随意拖动改变

<template>
  <div>
    <!-- 设置 :enableColResize="true" 就可实现表格列宽随意拖动改变 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :enableColResize="true"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

拖动后：

5、实现排序

<template>
  <div>
    <!-- 设置 enableSorting 为 true 就可实现表格数据排序-->
    <!-- 排序有默认顺序、升序、降序-->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :enableSorting="true"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

可以任意一列排序

6、实现筛选

<template>
  <div>
    <!-- 设置 enableFilter 为 true 就可实现筛选功能-->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :enableFilter="true"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

7、调整表格列宽大小自适应，避免横向滚动条

上面几个表格都有横向滚动条，

调用 Grid API 的 sizeColumnsToFit() 方法，就可以实现表格列宽大小自适应，避免横向滚动条

<template>
  <div>
    <!-- gridReady 绑定一个事件，在表格创建完成后执行 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :enableSorting="true" :enableFilter="true" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    }
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

8、实现单选

js中在绑定的表头 columnDefs 中增加 checkboxSelection: true 就会出现选择框，这个时候只能单选

<template>
  <div>
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name', checkboxSelection: true},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

9、实现多选

js中在绑定的表头 columnDefs 中增加 checkboxSelection: true 就会出现选择框，这个时候只能单选

然后在HTML中设置 rowSelection="multiple" 就可以实现多选了

<template>
  <div>
    <!-- 设置 rowSelection="multiple" 实现多选 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" rowSelection="multiple"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: '姓名', field: 'name', checkboxSelection: true},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

10、获取选取的数据

调用 Grid API 的 getSelectedNodes() 方法，返回所选节点的列表

<template>
  <div>
    <button @click="getSelectedRows()">获取选择的数据</button>
    <!-- 设置 rowSelection="multiple" 实现多选 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" rowSelection="multiple" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: { AgGridVue },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        {headerName: '姓名', field: 'name', checkboxSelection: true},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    },
    getSelectedRows () {
      // 获取所选节点的列表
      const selectedNodes = this.gridApi.getSelectedNodes();
      console.log(selectedNodes);
      // 获取所选节点的列表数据
      var selectedData = selectedNodes.map(node => node.data);
      console.log(selectedData);
      // 获取所选节点的列表数据中的某一列数据
      var selectedDataName = selectedData.map(node => node.name);
      console.log(selectedDataName);
      // 拼接成字符串
      var selectedDataStringName = selectedDataName.join(', ');
      console.log(selectedDataStringName);
    }
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
  margin-top: 20px;
}
</style>

11、给 columnDefs 的元素 设置 children，渲染分组表头。

<template>
  <div>
    <!-- gridReady 绑定一个事件，在表格创建完成后执行 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      // 给 columnDefs 的元素 设置 children，可以渲染出分组表头。
      columnDefs: [
        {
          headerName: '基本信息',
          children: [
            {headerName: '姓名', field: 'name'},
            {headerName: '性别', field: 'gender'},
            {headerName: '年龄', field: 'age'}
          ]
        },
        {
          headerName: '收入',
          children: [
            {headerName: '月收入', field: 'income'},
            {headerName: '年收入', field: 'yearIncome'}
          ]
        }
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, income: 2000, yearIncome: 24000},
        {name: '柳叶', gender: '女', age: 25, income: 2500, yearIncome: 35000},
        {name: '姜宇', gender: '男', age: 18, income: 1800, yearIncome: 20000}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    }
  }
};
</script>

<style scoped>
.table{
  width: 60%;
  height: 200px;
}
</style>

12、设置表格固定列宽：width

<template>
  <div>
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: 'ID', field: 'id', width: 60},
        {headerName: '姓名', field: 'name', width: 100},
        {headerName: '性别', field: 'gender', width: 100},
        {headerName: '年龄', field: 'age', width: 100}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, id: 1},
        {name: '柳叶', gender: '女', age: 25, id: 2},
        {name: '姜宇', gender: '男', age: 18, id: 3}
      ]
    };
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

13、设置表格最小最大列宽minWidth,maxWidth

<template>
  <div>
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      columnDefs: [
        {headerName: 'ID', field: 'id', maxWidth: 60},
        {headerName: '姓名', field: 'name', minWidth: 240},
        {headerName: '性别', field: 'gender', minWidth: 180},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, id: 1},
        {name: '柳叶', gender: '女', age: 25, id: 2},
        {name: '姜宇', gender: '男', age: 18, id: 3}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    }
  }
};
</script>

<style scoped>
.table{
  width: 600px;
  height: 200px;
}
</style>

注意：需要同时设置表格列宽自适应，使用minWidth,maxWidth才会生效

14、鼠标单击某单元格选中，获取选中的数据

<template>
  <div>
    <!-- gridReady 绑定一个事件，在表格创建完成后执行 -->
    <!-- 这些属性，不需要绑定，直接给属性值 -->
    <ag-grid-vue class="table ag-theme-balham"
      :columnDefs="columnDefs"
      :rowData="rowData"
      rowSelection="multiple"
      rowHeight="40"
      :enableSorting="true"
      :enableFilter="true"
      :enableColResize="true"
      :gridReady="onGridReady"
      :modelUpdated="onModelUpdated"
      :cellClicked="onCellClicked">
    </ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        {headerName: '', field: '', maxWidth: 44, checkboxSelection: true},
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'},
        {headerName: '收入', field: 'income'},
        {headerName: 'ID', field: 'id'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, income: 2000, id: 1},
        {name: '柳叶', gender: '女', age: 25, income: 2500, id: 2},
        {name: '姜宇', gender: '男', age: 18, income: 1800, id: 3}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    },
    onModelUpdated (param) {
      console.log('onModelUpdated');
      console.log(param);
    },
    onCellClicked (cell) {
      console.log(cell);
      // 获取选中的单元格的数据
      console.log(cell.value);
      // 获取选中的单元格所在的行号，从0开始
      console.log(cell.rowIndex);
      // 获取选中的单元格所在行的所有数据
      console.log(cell.data);
      // 获取选中的单元格所在列的表头的headerName 和 field
      console.log(cell.colDef);
    }
  }
};
</script>

<style scoped>
.table{
  width: 60%;
  height: 240px;
}
</style>

15、总结

在Vue中使用ag-grid，ag-Grid属性使用v-bind进行属性绑定，但是当属性只是一个简单的字符串值时，则不需要绑定，只需将值作为属性放置，例如：

      rowSelection="multiple"  // 设置多选
      rowHeight="40"  // 设置单元格行高

有些事布尔型属性，默认值为false，例如：

      :enableSorting="true"
      :enableFilter="true"
      :enableColResize="true"

有些属性可以注册事件回调，例如：

      :gridReady="onGridReady"
      :modelUpdated="onModelUpdated"
      :cellClicked="onCellClicked"

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

aggrid

ag-grid在Vue项目中的基本使用 的相关文章

  • NoSQL 概念

    http www infoq com cn news 2011 01 nosql why 写道

  • shell中的变量

    变量 shell中预设的变量都是大写的 变量就是使用一个较简单的字符串来替代某些具有特殊意义的设定以及数据 可以使用echo命令显示变量的值 echo PWD echo PATH 另外可以使用env命令列出全部系统预设的系统环境变量 不同登

随机推荐

  • 华为云云耀云服务器L实例评测｜深度体验云耀云服务器购买和Ubuntu环境性能压力评测

    文章目录 步骤一 云耀云服务器L实例配置选型 步骤二 购买云耀云服务器L实例 购买关键须知 购买流程体验 步骤三 轻松上手远程登录云耀云服务器L实例 步骤四 对云耀云服务器L实例进行压力测试 第一项测试 CPU压力测试 第三项测试 云耀云服

  • redis根据指定端口号方式访问redis服务端！

    以默认的方式进入 端口号 6379 指定端口号进入客户端 端口号 6378 此服务器安装了两个redis服务端 害老子去一个没存数据的redis服务器里刷缓存

  • PandoraBox版本及已安装软件包

    主机名 PandoraBox 7FBB 型号 Netgear R6220 固件版本 PandoraBox 19 02 2019 02 01 git 93f2639a7 LuCI Master git 19 026 77036 498ca21

  • ThinkPHP实现凯撒密码加密和解密

    ThinkPHP实现凯撒密码加密和解密 在密码学中 恺撒密码 英语 Caesar cipher 或称恺撒加密 恺撒变换 变换加密 是一种最简单且最广为人知的加密技术 它是一种替换加密的技术 明文中的所有字母都在字母表上向后 或向前 按照一个

  • CSS 类选择器的特殊使用-多类名

    title CSS 类选择器的特殊使用 多类名 CSS 类选择器的特殊使用 多类名概念 一个标签有多个名字 多类名的使用方式 示例代码

  • 在NW.js里面使用node-printer

    0 写在前面的一些提示 不要使用太高版本的 NW js 以及 Node js 因为 node printer 会有兼容性问题 目前笔者测试到 node printer 最高只能在 0 43 x 版本以及低于这个版本的 NW js 里面正常运

  • 代码走查与代码审查区别

    代码走查 程序员和测试员组成审查小组 通过逻辑运行程序 第一步 小组成员提前阅读设计规格书 程序文本等相关文档 第二步 利用测试用例 使程序逻辑运行 记录程序的踪迹 发现 讨论 解决问题 代码审查 程序员和测试员组成审查小组 第一步 小组成

  • robot通过一个元素定位另一个元素

    xpath定位 xpath span text 文章评为精华 div div span text 去完成

  • 一些keil编程错误总结

    一 error c267 delay 10us requires ANSI style prototype问题 解决方法 1 未进行 模块化程序设计时 delay 10us该子函数要在主函数前 2 在进行 模块化程序设计时 这是由于 c文件

  • 区块链在非金融领域有哪些值得期待的应用

    引言 自己关注区块链好多年了 感觉大部分人都在炒币 或者所谓的搞金融 但是现在各国的审查都越来越严格 针对金融领域的审查尤其严格 在国内 基本上是禁止区块链应用有任何的发币行为的 我个人也是觉得金融领域的监管太多 反而不容易落地 这篇文章来

  • Redis中的String类型与List类型个人理解

    String类型 String类型是Redis的最基础类型 最大能存储512MB 其中存储值可以是最简单的字符串 复杂的 xml json的字符串 二进制图像或者音频的字符串 以及是数字的字符串 String数据类型与结构 基本操作 set

  • R语言的plyr包简介

    转载地址 http www jianshu com p bfddfe29aa39 R语言的plyr包简介 字数3040 阅读2875 评论3 喜欢7 R语言中的类SQL操作 plyr包可以进行类似于数据透视表的操作 将数据分割成更小的数据

  • Eclipse启动tomcat出现invalid ports的解决办法

    在Eclipse出现以上错误的 可以继续往下看 在server中 点击Tomcat 进入设置 把三个端口都填写了不留空 根据情况来填写相应的端口号 防止占用 保存即可

  • 交易流水指标统计——pandas

    1 根据交易流水 计算每个交易交易对象的如下指标 总收入笔数 总收入月数 最大月收入笔数 最大月收入笔数所在日期 年月日格式 import pandas as pd path r C Users xxx Desktop 科技数据 xlsx

  • Angular入门学习笔记

    Angualr入门扫盲必备 声明 这篇是我学习angualr的笔记 可以转载 但必须注明来源作者 kone 并附上本文链接 A 环境 工具 1 先确保安装了nodejs和npm Nodejs npm 包管理器 cnpm 淘宝的镜像 2 安裝

  • 低代码让开发变得不再复杂

    传统IT自研软件开发 通过编程去写代码 还有数据库 API 第三方基础架构等 从而造成开发周期长 难度大 技术人员不易于开发维护 因此价格及时间成本也是相对较高 后期出现了可以直接应用的成品软件 以及现在火热的低代码开发方式 针对这三种方式

  • 给Sqlite数据库设置密码

    免费版Sqlie是不提供设置密码功能的 经过查阅资料最终找到了解决方案 方案一 从sqlite源码入手 据说sqlite源码已经提供了加密的接口 只是免费版没有实现 可以参考这位仁兄的博客以了解详情 http www cnblogs com

  • 架构师是做什么的？

    哈佛大学有一个非常著名的关于目标对人生影响的跟踪调查 调查的对象是一群智力 学历 环境等条件都差不多的大学毕业生 结果是这样的 第一类人 27 的人 没有目标 第二类人 60 的人 目标模糊 第三类人 10 的人 有清晰但比较短期的目标 第

  • Mysql错误1452 - Cannot add or update a child row: a foreign key constraint fails 原因及解决方法

    报错的原因大概分为三种 原因一 添加的外键列与另一个表的唯一索引列 一般是主键 的数据类型不同 原因二 要添加外键的表类型与另一个表的存储引擎是不是都为innodb引擎 查看表引擎 法一 show create table 表名 法二 sh

  • ag-grid在Vue项目中的基本使用

    ag grid官网 1 安装 npm install ag grid community ag grid vue save dev 2 在main js中引入ag grid的样式文件 引入ag grid的样式文件 import node m

热门标签