ag-grid动态加载表数据
优势：灵活度高，代码复用性强
实现步骤：
1. 安装 ag-grid-vue 组件，
在vue项目中，运行如下命令即可安装
npm install --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0
安装完成后，在 package.json 文件中可以看到如下组件，说明已经安装成功
在后续运行项目过程中，如果提示要安装 enterprise 组件，根据控制台提示的命令安装即可。
npm install --save ag-grid-enterprise
2. 在vue页面中引入组件
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css"
import {AgGridVue} from "ag-grid-vue"
import "ag-grid-enterprise" //关键依赖：引入之后组件才会生效
其中：ag-grid-enterprise 是非常关键的依赖，一定要导入，aggrid组件才会生效。
3. 在 components 方法中注册 AgGridVue
4. 搭建aggrid框架
<!--右侧内容栏（动态表格）-->
<div class="commendContent" id="ag-gridStyle">
<ag-grid-vue
class="table ag-theme-balham"
v-show="isSee"
id="myGrid"
:columnDefs="columnDefs"
:rowData="rowData"
:sideBar="sideBar"
:enableColResize="true"
row-selection="multiple"
@selection-changed="onSelectionChanged"
@gridReady="onGridReady"
:tooltipShowDelay="tooltipShowDelay"
:localeText="localeText"
:height="tableMaxHeight"
>
</ag-grid-vue>
</div>
框架搭建完成之后，一定要指定table的高度，否则列表不会展示数据
5. 定义aggrid相关变量及完成汉化
//ag-grid相关
domLayout:null, //高度自适应，根据获取到的数据条数自适应高 度，加载速度慢，页面卡顿，不推荐使用
tooltipShowDelay: [], //鼠标悬浮在单元格上，显示全名
gridOptions: {},
gridApi: {},
columnApi: [],
//定义ag-grid列
columnDefs: [],
//ag-grid需要显示的数据
rowData: [],
//ag-grid列表右侧的过滤器
sideBar: [],
//存放多选框选中的数据
selectRows: [],
// 当输入sql错误和结果集为0的时候不显示aggrid表格
isSee: true,
globalDropDownBox: false, //移入显示下拉框
globalDropTop: 0,
globalDropLeft: 0,
timeOut: setTimeout,
modelDetailRelation: [], // 存放模型详细关联表
countData:'',
selectedData:0,
//ag-grid汉化
localeText:{
// for filter panel
page: '页',
more: '更多',
to: '到',
/* of: 'daOf', */
next: '下一页',
last: '最后',
first: '第一',
previous: '以前的',
loadingOoo: '加载中...',
// Row:"行",
// 'Row Groups':"行分组",
// for set filter
selectAll: '全部选择',
searchOoo: '搜索...',
blanks: '空',
Column:"列",
labels:"标签",
// for number filter and text filter
filterOoo: '过滤',
applyFilter: '过滤中...',
equals: '等于',
notEqual: '不等于',
// for number filter
lessThan: '少于',
greaterThan: '多于',
lessThanOrEqual: '小于等于',
greaterThanOrEqual: '大于等于',
inRange: '在范围内',
// for text filter
contains: '包含',
notContains: '不包含',
startsWith: '开始',
endsWith: '结束',
// filter conditions
andCondition: '并且',
orCondition: '或者',
// the header of the default group column
// group: '分组',
// tool panel
columns: '列',
filters: '过滤器',
rowGroupColumns: '行列组',
// rowGroupColumnsEmptyMessage: '行列组为空',
valueColumns: '列值',
pivotMode: '透视模式',
// groups: '分组',
values: '值',
// pivots: '中心点',
valueColumnsEmptyMessage: '列值为空',
// pivotColumnsEmptyMessage: '中心点为空',
toolPanelButton: '工具按钮',
// other
noRowsToShow: '暂时没有要展示的数据',
// enterprise menu
pinColumn: '列位置调整',
valueAggregation: '聚合值',
autosizeThiscolumn: '自动调整此列大小',
autosizeAllColumns: '自动调整所有列的大小',
groupBy: '分组',
ungroupBy: '取消分组',
resetColumns: '重置列',
expandAll: '展开所有',
collapseAll: '关闭所有',
toolPanel: '工具',
export: '导出',
csvExport: 'CSV 导出',
excelExport: 'Excel 导出(.xlsx)',
excelXmlExport: 'Excel 导出(.xml)',
// enterprise menu pinning
PinColumn:"固定",
pinLeft: '居左',
pinRight: '居右',
noPin: '默认',
// enterprise menu aggregation and status bar
sum: '合计',
min: '最小值',
max: '最大值',
/* none: 'laNone', */
count: '计数',
average: '平均值',
avg : '平均值',
// standard menu
copy: '复制',
copyWithHeaders: '携表头复制',
ctrlC: 'ctrl-C',
paste: '粘贴',
ctrlV: 'ctrl-V'
},
6. 开启列表右侧的工具面板
this.gridOptions = {}
this.sideBar = true; //开启右侧面板的关键代码
this.domLayout = 'autoHeight'; //高度自适应
7. aggrid创建完后之后要执行的事件
onGridReady(params) {
// 获取gridApi
this.gridApi = params.api;
this.columnApi = params.columnApi;
// 这时就可以通过gridApi调用ag-grid的传统方法了
this.gridApi.sizeColumnsToFit();
//默认隐藏右侧栏
this.gridApi.closeToolPanel();
this.gridApi.getDisplayedRowCount();
}
完整的aggrid动态加载实例：
<template>
<div>
<el-card class="box-card" style="margin-left: 14px;width: 100%;float: right;">
<div>
<el-button
class="buttonStyle"
type="primary"
plain
@click="submitForm()"
>
提交审核
</el-button>
<ag-grid-vue
class="table ag-theme-balham"
v-show="isSee"
id="myGrid"
:columnDefs="columnDefs"
:rowData="rowData"
:sideBar="sideBar"
:enableColResize="true"
row-selection="multiple"
:localeText="localeText"
>
</ag-grid-vue>
</div>
<!--分页组件-->
<div class="block"
style="float: right;margin-right: 15px;margin-top: 10px;">
<el-pagination
@size-change="handleSizeChange($event)"
@current-change="handleCurrentChange($event)"
:current-page="page.current"
:page-sizes="[10, 15, 20]"
:page-size="page.size"
layout="total, sizes, prev, pager, next, jumper"
:total="this.page.total">
</el-pagination>
</div>
</el-card>
</div>
</template>
<script>
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import { AgGridVue } from "ag-grid-vue"
import "ag-grid-enterprise" //关键依赖：引入之后组件才会生效
import {loadContentData} from "@/api/warning/warningdata";
export default {
name: "show",
components:{
AgGridVue,
},
data (){
return{
gridOptions: {},
gridApi: {},
columnApi: [],
//定义ag-grid列
columnDefs: [],
//ag-grid需要显示的数据
rowData: [],
//ag-grid列表右侧的过滤器
sideBar: [],
//存放多选框选中的数据
selectRows: [],
// 当输入sql错误和结果集为0的时候不显示aggrid表格
isSee: true,
//ag-grid汉化
localeText:{
// for filter panel
page: '页',
more: '更多',
to: '到',
/* of: 'daOf', */
next: '下一页',
last: '最后',
first: '第一',
previous: '以前的',
loadingOoo: '加载中...',
// Row:"行",
// 'Row Groups':"行分组",
// for set filter
selectAll: '全部选择',
searchOoo: '搜索...',
blanks: '空',
Column:"列",
labels:"标签",
// for number filter and text filter
filterOoo: '过滤',
applyFilter: '过滤中...',
equals: '等于',
notEqual: '不等于',
// for number filter
lessThan: '少于',
greaterThan: '多于',
lessThanOrEqual: '小于等于',
greaterThanOrEqual: '大于等于',
inRange: '在范围内',
// for text filter
contains: '包含',
notContains: '不包含',
startsWith: '开始',
endsWith: '结束',
// filter conditions
andCondition: '并且',
orCondition: '或者',
// the header of the default group column
// group: '分组',
// tool panel
columns: '列',
filters: '过滤器',
rowGroupColumns: '行列组',
// rowGroupColumnsEmptyMessage: '行列组为空',
valueColumns: '列值',
pivotMode: '透视模式',
// groups: '分组',
values: '值',
// pivots: '中心点',
valueColumnsEmptyMessage: '列值为空',
// pivotColumnsEmptyMessage: '中心点为空',
toolPanelButton: '工具按钮',
// other
noRowsToShow: '没有可以展示的数据',
// enterprise menu
pinColumn: '列位置调整',
valueAggregation: '聚合值',
autosizeThiscolumn: '自动调整此列大小',
autosizeAllColumns: '自动调整所有列的大小',
groupBy: '分组',
ungroupBy: '取消分组',
resetColumns: '重置列',
expandAll: '展开所有',
collapseAll: '关闭所有',
toolPanel: '工具',
export: '导出',
csvExport: 'CSV 导出',
excelExport: 'Excel 导出(.xlsx)',
excelXmlExport: 'Excel 导出(.xml)',
// enterprise menu pinning
PinColumn:"固定",
pinLeft: '居左',
pinRight: '居右',
noPin: '默认',
// enterprise menu aggregation and status bar
sum: '合计',
min: '最小值',
max: '最大值',
/* none: 'laNone', */
count: '计数',
average: '平均值',
avg : '平均值',
// standard menu
copy: '复制',
copyWithHeaders: '携表头复制',
ctrlC: 'ctrl-C',
paste: '粘贴',
ctrlV: 'ctrl-V'
},
//分页相关（参数）
page: {current: 1, size: 10, total: 0, records: []},
pageQueryTree: {
condition: {},
pageNo: 1,
pageSize:10,
sortBy: 'asc',
sortName: 'create_time',
modelParamName: '',
},
beforeTableName: ''
};
},
methods:{
//获取预警表数据，将返回的数据放在ag-grid-vue 组件上
getData(tableName){
this.pageQueryTree.condition.单位名称 = tableName;
this.pageQueryTree.condition.统一社会信用代码 = '';
loadContentData(this.pageQueryTree).then(resp =>{
var jsonStr = JSON.stringify(resp.data);
var items = resp.data.columnData
this.columnDefs = [] //表头
for(let i in items){
//过滤掉pk主键
if ("PK主键" !== items[i].columnName){
if (1 == i){
var obj ={
headerName: items[i].columnName,
field: items[i].columnName,
filter: true,
//flex: 1, 该字段会影响列的宽度
editable: true,
checkboxSelection: true
};
this.columnDefs.push(obj);
}else {
var obj ={
headerName: items[i].columnName,
field: items[i].columnName,
filter: true,
//flex: 1, 该字段会影响列的宽度
editable: true,
};
this.columnDefs.push(obj);
}
}
};
//获取表数据
this.rowData = []
for (var i = 0; i < resp.data.specifyData.records.length;i++){
//alert("返回数据的长度是："+resp.data.specifyData.records.length)
var items = resp.data.specifyData.records[i];
if (items.状态 === 0) {
items.状态 = '待挂号'
} else if (items.状态 === 1) {
items.状态 = '挂号中'
} else if (items.状态 === 2) {
items.状态 = '预警待查'
} else { // 3
items.状态 = '已销号'
}
this.rowData.push(items);
}
//分页的总条数
this.page.total = resp.data.specifyData.total;
})
this.gridOptions = {}
this.sideBar = true; //这是ag-grid列表右侧的筛选器，不能删除
},
//获取所选节点的列表
submitForm(){
}
},
mounted() {
this.gridApi = this.gridOptions.api;
this.columnApi = this.gridOptions.columnApi;
}
}
</script>
<style scoped>
.table {
width: 600px;
height: 520px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
.buttonStyle {
background: #559ed4;
width: 70px;
height: 24px;
padding: 4px;
border-radius: 4px;
position: relative;
color: #ffffff;
font-style: normal;
font-family: "iconfont" !important;
font-weight: normal !important;
margin-right: 6px;
margin-left: 970px;
margin-bottom: 2px;
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
