ag-grid中文教程

ag-grid vue 快速入门教程

ag-grid是一款极其优秀的表格插件几乎能满足你所有的需求，本文将介绍ag-grid vue的使用方法，包括如何安装开发环境、如何注册组件、如何初始化数据获取选中数据及对应的事件，本文开发环境是vscode npm webpack。

安装

//安装ag-grid包
npm install ag-grid-community ag-grid-vue --save-dev
//如果安装后运行 npm run dev 出现错误，那么就按提示安装对应的依赖
npm install --save vue-property-decorator 
npm install --save vue-class-component

引入样式文件

//引入ag-grid的样式文件，也可放main.js文件全局引用
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

基础例子

<template> 
   <div class="itxst"> 
    <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
    <ag-grid-vue 
     style="width: 80%; height: 200px;" 
     class="table ag-theme-balham"
     :columnDefs="columnDefs" 
     :rowData="rowData" 
     :enableColResize="true"
     :gridReady="onGridReady"
     @cellClicked="onCellClicked"
     ></ag-grid-vue>
  </div>
</template>
<script>
//引入样式文件
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  //注册draggable组件
  components: {
    AgGridVue
  },
  data() {
    return {  
      //定义ag-grid列
      columnDefs: [
        {headerName: '名称', field: 'title', checkboxSelection: true},
        {headerName: '网址', field: 'url', width: 200},
        {headerName: '分类', field: 'catalog'},
        {headerName: 'PR', field: 'pr'}
      ],
      //需要显示的数据
      rowData: [
        {title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
        {title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
        {title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
        {title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
      ]
    };
  },
  methods: { 
    //ag-grid创建完成后执行的事件
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 这时就可以通过gridApi调用ag-grid的传统方法了
      this.gridApi.sizeColumnsToFit();
    },
    //单元格点击事件
     onCellClicked (cell) {
      console.log(cell);
      // 获取选中单元格的数据
      console.log(cell.value);
      // 获取选中单元格所在行号
      console.log(cell.rowIndex);
      // 获取选中单元格所在行的数据
      console.log(cell.data); 
    }
  }
};
</script>
<style scoped>
.itxst {
  margin: 10px;
  text-align: left;
} 
</style>

在线试一试,UMD网页直接引入JS版

实现单选

绑定 columnDefs列示，设置 checkboxSelection: true 对应的列就会出现单选框，代码如下

//引入样式文件
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  //注册draggable组件
  components: {
    AgGridVue
  },
  data() {
    return {  
      //定义ag-grid列 checkboxSelection 对名称列显示单选框
      columnDefs: [
        {headerName: '名称', field: 'title', checkboxSelection: true},
        {headerName: '网址', field: 'url', width: 200},
        {headerName: '分类', field: 'catalog'},
        {headerName: 'PR', field: 'pr'}
      ],
      //需要显示的数据
      rowData: [
        {title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
        {title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
        {title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
        {title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
      ]
    };
  },
  methods: { 
    //ag-grid创建完成后执行的事件
    onGridReady (params) {
      console.log(params); 
    },
    //单元格点击事件
     onCellClicked (cell) {
      console.log(cell); 
    }
  }
};

多选框

在上面的代码基础上，设置属性rowSelection="multiple"即可实现多选。

<template> 
   <div class="itxst"> 
    <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
    <ag-grid-vue 
     style="width: 80%; height: 200px;" 
     class="table ag-theme-balham"
     :columnDefs="columnDefs" 
     :rowData="rowData" 
     :enableColResize="true"
     :gridReady="onGridReady"
     @cellClicked="onCellClicked"
      rowSelection="multiple"
     ></ag-grid-vue>
  </div>
</template>
<script>
//引入样式文件
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  //注册draggable组件
  components: {
    AgGridVue
  },
  data() {
    return {  
      //定义ag-grid列 checkboxSelection 对名称列显示单选框
      columnDefs: [
        {headerName: '名称', field: 'title', checkboxSelection: true},
        {headerName: '网址', field: 'url', width: 200},
        {headerName: '分类', field: 'catalog'},
        {headerName: 'PR', field: 'pr'}
      ],
      //需要显示的数据
      rowData: [
        {title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
        {title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
        {title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
        {title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
      ]
    };
  },
  methods: { 
    //ag-grid创建完成后执行的事件
    onGridReady (params) {
      console.log(params); 
    },
    //单元格点击事件
     onCellClicked (cell) {
      console.log(cell); 
    }
  }
};
</script>
<style scoped>
.itxst {
  margin: 10px;
  text-align: left;
} 
</style>

点击事件

获取用户点ag-grid-vue的事件，并获取对应的值，我们通过获取单元格事件为例进行演示。
<ag-grid-vue  @cellClicked="onCellClicked" ></ag-grid-vue>

<template> 
   <div class="itxst"> 
    <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
    <ag-grid-vue 
     style="width: 80%; height: 200px;" 
     class="table ag-theme-balham"
     :columnDefs="columnDefs" 
     :rowData="rowData"  
     @cellClicked="onCellClicked" 
     ></ag-grid-vue>
  </div>
</template>
<script>
//引入样式文件
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  //注册draggable组件
  components: {
    AgGridVue
  },
  data() {
    return {  
      //定义ag-grid列 checkboxSelection 对名称列显示单选框
      columnDefs: [
        {headerName: '名称', field: 'title', checkboxSelection: true},
        {headerName: '网址', field: 'url', width: 200},
        {headerName: '分类', field: 'catalog'},
        {headerName: 'PR', field: 'pr'}
      ],
      //需要显示的数据
      rowData: [
        {title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
        {title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
        {title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
        {title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
      ]
    };
  },
  methods: {  
    //单元格点击事件
     onCellClicked (cell) {
         alert("你点击了"+cell.rowIndex+"行，值："+cell.value)
         //单元格数据
         console.log(cell); 
         // 获取选中单元格所在行的数据
         console.log(cell.data);
    }
  }
};
</script>
<style scoped>
.itxst {
  margin: 10px;
  text-align: left;
} 
</style>

获取选中的值

首先要绑定gridReady事件获取ag-grid的api对象，然后通过this.gridApi.getSelectedRows();方法获取选中的数据，代码如下

<template> 
   <div class="itxst"> 
     <div @click="getValues"  class="btn">获取选中行数据</div>
    <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
    <ag-grid-vue 
     style="width: 80%; height: 200px;" 
     class="table ag-theme-balham"
     :columnDefs="columnDefs" 
     :rowData="rowData" 
     :enableColResize="true"
     @gridReady="onGridReady" 
      rowSelection="multiple"
     ></ag-grid-vue>
  </div>
</template>
<script>
//引入样式文件
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  //注册draggable组件
  components: {
    AgGridVue
  },
  data() {
    return {  
      //定义ag-grid列 checkboxSelection 对名称列显示单选框
      columnDefs: [
        {headerName: '名称', field: 'title', checkboxSelection: true},
        {headerName: '网址', field: 'url', width: 200},
        {headerName: '分类', field: 'catalog'},
        {headerName: 'PR', field: 'pr'}
      ],
      //需要显示的数据
      rowData: [
        {title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
        {title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
        {title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
        {title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
      ]
    };
  },
  methods: { 
    //ag-grid创建完成后执行的事件
    onGridReady (params) {
        console.log(params);
        // 获取gridApi
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
        // 这时就可以通过gridApi调用ag-grid的传统方法了
        this.gridApi.sizeColumnsToFit();
    },
    getValues(){ 
       //获取选中的数据
        var selRows=  this.gridApi.getSelectedRows();
        if(selRows==null || selRows.length<=0)
        {
          alert("您未选中任何数据");
          return;
        }
        alert(selRows[0].title);
    }
  }
};
</script>
<style scoped>
.itxst {
  margin: 10px;
  text-align: left;
} 
.btn{
   width: 150px;
    margin-bottom: 10px;
    border: solid 1px #ddd;
    padding: 6px;
    text-align: center;
    border-radius: 6px;
    background-color: #eee;
}
</style>

删除选中的数据

<template> 
   <div class="itxst"> 
     <div @click="deleteRows"  class="btn">删除选中行数据</div>
    <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
    <ag-grid-vue 
     style="width: 80%; height: 200px;" 
     class="table ag-theme-balham"
     :columnDefs="columnDefs" 
     :rowData="rowData" 
     :enableColResize="true"
     @gridReady="onGridReady" 
      rowSelection="multiple"
     ></ag-grid-vue>
  </div>
</template>
<script>
//引入样式文件
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  //注册draggable组件
  components: {
    AgGridVue
  },
  data() {
    return {  
      //定义ag-grid列 checkboxSelection 对名称列显示单选框
      columnDefs: [
        {headerName: '名称', field: 'title', checkboxSelection: true},
        {headerName: '网址', field: 'url', width: 200},
        {headerName: '分类', field: 'catalog'},
        {headerName: 'PR', field: 'pr'}
      ],
      //需要显示的数据
      rowData: [
        {title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
        {title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
        {title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
        {title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
      ]
    };
  },
  methods: { 
    //ag-grid创建完成后执行的事件
    onGridReady (params) {
        console.log(params);
        // 获取gridApi
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
        // 这时就可以通过gridApi调用ag-grid的传统方法了
        this.gridApi.sizeColumnsToFit();
    },
    deleteRows(){ 
       //获取选中的数据
        var selRows=  this.gridApi.getSelectedRows();
        if(selRows==null || selRows.length<=0)
        {
          alert("您未选中任何数据");
          return;
        }
        //注意调用updateRowData方法并不会更新vue的data
        // this.gridApi.updateRowData({remove: selRows});
        //正确的删除方法是这样的
        this.rowData = this.rowData.filter(item =>{
          return selRows.filter(m=>m.title===item.title).length<=0
        } ); 
    }
  }
};
</script>
<style scoped>
.itxst {
  margin: 10px;
  text-align: left;
} 
.btn{
   width: 150px;
    margin-bottom: 10px;
    border: solid 1px #ddd;
    padding: 6px;
    text-align: center;
    border-radius: 6px;
    background-color: #eee;
}
</style>
Catalog
ag-grid中文教程 ag-grid vue ag-grid vue入门教程 umd浏览器版用法 vue全选反选 vue插入数据新增行 常用功能 ag-grid多表头 ag-grid固定列 ag-grid拖动宽度和位置 ag-grid数据刷选器 ag-grid编辑表格 ag-gird设置 ag-grid定义列 ag-grid 定义列宽 ag-grid设置行高列宽 ag-grid设置选择行 ag-grid设置复选框 ag-grid置顶合计行 ag-grid底部合计行 ag-grid行组 ag-grid客户端排序 ag-grid方法 setRowData重设表格行数据 ag-grid增加删除修改行 ag-grid全选反选 sizeColumnsToFit自适应大小 setColumnDefs新增列 setRowData插入新行 setPinnedTopRowData设置置顶行 setPinnedBottomRowData设置底部汇总行 forEachNode遍历行对象 getPinnedTopRowCount置顶行数 getPinnedBottomRow底部合计 getRowNode获取行对象 refreshCells刷新更新数据 ag-grid单元格焦点 ag-grid事件 onRowClicked行点击事件 onCellClicked单击单元格事件 onCellDoubleClicked双击单元格事件 ag-grid全部事件列表