agGrid数据更改后刷新表格数据
非Server数据，用:rowData属性赋值的
对应的GridOptions属性
JavaScript 全选
gridOptions: {
context: this,
rowSelection: "single",
rowHeight: 25,
animateRows: true,
},利用Ag-Grid表格的 applyTransaction 方法，注意该方法需要先设置表格的 getRowNodeId，不然会不起作用，参考：https://www.yesdotnet.com/archive/post/1617623423.html
JavaScript 全选
onCreate (data) {
console.log(data)
this.gridOptions.api.applyTransaction({ add: data })
},
onUpdate (data) {
console.log(data)
this.gridOptions.api.applyTransaction({ update: data })
}Server数据
对应的Ag-Grid 属性gridOptions设置
JavaScript 全选
gridOptions: {
context: this,
rowSelection: "single",
rowHeight: 25,
animateRows: true,
rowModelType: "serverSide",
serverSideStoreType: "partial",
cacheOverflowSize: 2, //load状态显示两行
pagination: true, // 分页
suppressPaginationPanel: true, // 禁用分页面板
paginationPageSize: 50,
},使用 refreshServerSideStore()方法
JavaScript 全选
// 新增
onCreate(data) {
// this.gridOptions.api.refreshInfiniteCache();
this.gridOptions.api.refreshServerSideStore();
},
// 更新
onUpdate(data) {
// this.gridOptions.api.refreshInfiniteCache();
this.gridOptions.api.refreshServerSideStore();
},旧版本使用：
对应gridOptions属性设置
JavaScript 全选
gridOptions: {
rowSelection: 'single',
rowHeight: 25,
rowModelType: 'infinite',
cacheOverflowSize: 2, //load状态显示两行
pagination: true,// 分页
suppressPaginationPanel: true,// 禁用分页面板
paginationPageSize: 50,
},刷新数据方式：
JavaScript 全选
this.gridOptions.api.refreshInfiniteCache();
版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
post 张国生
