ag-grid vue 全选反选并获取选中数据

本章节演示如果通过ag-grid vue来全选反选并获取选中数据,实现这些功能也是通过ag-grid的api实现,如果需要了解其他API可以点击本教程的非VUE菜单查看具体用法。

相关API

API名称说明
selectAll设置全选包含隐藏的行
deselectAll设置反选
selectAllFiltered根据筛选条件选中行
deselectAllFiltered根据筛选条件选反行
getSelectedRows获取选中数据

完整代码

<template> 
   <div class="itxst"> 
     <div @click="allChecked"  class="btn">全选</div>
     <div @click="unChecked"  class="btn">反选</div>
     <div @click="getRows"  class="btn">获取选中数据</div>
     <div @click="delRows"  class="btn">删除选中数据</div>
    <!-- 使用ag-grid-vue组件 其中columnDefs为列,rowData为表格数据 -->
    <ag-grid-vue 
     style="width: 100%; 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();
    },
    //设置全选
    allChecked(){
      this.gridApi.selectAll();
    },
    //设置反选
     unChecked(){
      this.gridApi.deselectAll();
    },
    //获取选中的数据
     getRows(){
        var selRows=  this.gridApi.getSelectedRows();
        if(selRows==null || selRows.length<=0)
        {
          alert("您未选中任何数据");
          return;
        }
        alert(JSON.stringify(selRows));
    },
    //删除选中数据
    delRows(){ 
       //获取选中的数据
        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;
    display: inline-block;
    cursor:pointer;
}
</style>

在线试一试

umd版用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ag-grid-vue全选反选例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="http://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="http://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <script src="http://www.itxst.com/package/ag-grid-vue/ag-grid-vue.umd.js"></script>
    <link href="http://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
    <style>
        .btn {
            width: 150px;
            margin-bottom: 10px;
            border: solid 1px #ddd;
            padding: 6px;
            text-align: center;
            border-radius: 6px;
            background-color: #eee;
            display: inline-block;
            cursor:pointer;
        }
    </style>
</head>
<body style="padding:10px;">
    <div id="app">
        <div @click="allChecked" class="btn">全选</div>
        <div @click="unChecked" class="btn">反选</div>
        <div @click="getRows" class="btn">获取选中数据</div>
        <div @click="delRows" class="btn">删除选中数据</div>
        <!-- 使用ag-grid-vue组件 其中columnDefs为列,rowData为表格数据 -->
        <ag-grid-vue style="width: 100%; height: 200px;"
                     class="table ag-theme-balham"
                     :column-defs="columnDefs"
                     :row-data="rowData"
                     @grid-ready="onGridReady" ></ag-grid-vue>
    </div>
    <script>
        //注册ag-grid-vue组件
        Vue.component('ag-grid-vue', window["ag-grid-vue"].AgGridVue);


        var app = new Vue({
            el: '#app',
            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(); 
                },
                //设置全选
                allChecked() {
                    this.gridApi.selectAll();
                },
                //设置反选
                unChecked() {
                    this.gridApi.deselectAll();
                },
                //获取选中的数据
                getRows() {
                    var selRows = this.gridApi.getSelectedRows();
                    if (selRows == null || selRows.length <= 0) {
                        alert("您未选中任何数据");
                        return;
                    }
                    alert(JSON.stringify(selRows));
                },
                //删除选中数据
                delRows() {
                    //获取选中的数据
                    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>
</body>
</html>