ag-grid中文教程
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="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
<script src="https://www.itxst.com/package/ag-grid-vue/ag-grid-vue.umd.js"></script>
<link href="https://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>