AG表格滚动分页文档

AG表格在使用滚动分页时，不可使用rowData属性做为数据源，传入表格。因为AG的滚动分页，使用的是特殊表模型，所有正常模型下的API有可能会失效。

使用AG滚动分页时，需把正常数据模型替换成滚动分页数据模型，

示例：

    <TablecolumnDefs={this.columns}rowData={[rowData]}rowModelType={'infinite'} // 切换数据模型至滚动分页/>

使用滚动分页后，使用setDatasource来会写数据。

一般来说，无操作项(增，删)的滚动分页的AG表格，滚动分页的事件写在表格onGridReady里。

示例：

let dataSource = {rowCount: null, // 数据行数getRows: (params) => { // params里包含分页所需参数let dataList: any = this.stateIM.rowData // 取出数据源进行操作if (dataList.length === 0 || dataList.length < params.startRow) {this.findByMonitorItemIdByPage(params.startRow).then((data: any) => { // 调用后台数据查询const {total} = this.stateIM // 总条数let lastRow: number = 0 // 每页最后一行的下标if (data) {if (total <= params.endRow) lastRow = totalelse if (total > params.endRow && lastRow < total) {lastRow = params.startRow + data.lengthif (lastRow % params.endRow === 0 && total > lastRow) {lastRow = lastRow + 1}} else lastRow = total ? total : 0}params.successCallback(data, lastRow) // 回调事件})} else {let data = dataList.filter((v, i) => (i >= params.startRow && i < (params.startRow + this.stateIM.pageSize)))params.successCallback(ImmutableUtil.asMutableDeep(data), params.startRow + data.length)}}}this.agApi.api.setDatasource(dataSource)

对于有操作的分页来说，亦不能调取正常数据模型的api，因为表格的数据模型已经改变，此时调用正常模型不会生效。注：如果滚动分页无效或只加载第一页，请检查代码中请求数据总条数是否正确。

增添一条数据

this.agApi.updateRowData({add: add, addIndex: index})

删除数据

this.agApi.refreshInfiniteCache()
删除较为特殊，此方法只需你改变state后调用即可，这点和正常模型不一致。

AG表格基础滚动分页-React版本相关推荐

ag-grid表格基本使用方法-React版本
AG表格基本用法及Api 在要使用的项目中,首次使用需要引入相关组件包(注:项目中所有组件都是封装之后的).引入方式如下:import {Table} from 'pkg/common/table' ...
表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口
不知道UI抽什么风,所有列表都没用分页器,一律采用滚动加载.但我又是个懒蛋,不想手写所以就用了element-plus的无限滚动,但是v-infinite-scroll和el-table这俩搁一块就有 ...
JDBC 学习笔记（一）—— 基础知识 + 分页技术
2019独角兽企业重金招聘Python工程师标准>>> 本文查阅方法: 1.查阅目录 -- 查阅本文目录,确定想要查阅的目录标题 2.快捷"查找" ...
FineUIMvc随笔（6）对比WebForms和MVC中表格的数据库分页
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 通过对比WebForms和MVC中表格数据库分页代码的不同,可以对 MVC 中的数据流转有更加深入的了解. WebForms 中 ...
在数据仓储的情况下进一步封装数据库基础操作，此版本为异步版本
1 /// <summary> 2 /// 在数据仓储的情况下进一步封装数据库基础操作,此版本为异步版本 Created by ZhangQC 2016.08.17 3 /// </ ...
c# ui 滚动分页_UI备忘单：分页，无限滚动和“加载更多”按钮
c# ui 滚动分页重点 (Top highlight) When you have a lot of content, you have to rely on one of these thre ...
excle计算机基础测试,计算机基础测试题--Excel--雨课堂版本--手机版课件.pptx
<计算机基础测试题--Excel--雨课堂版本--手机版课件.pptx>由会员分享,提供在线免费全文阅读可下载,此文档格式为pptx,更多相关<计算机基础测试题--Excel--雨课 ...
Redis：基础、数据类型和版本区别(持续更新)
Redis:基础.数据结构和版本区别 Redis:基础 Redis:数据类型 String(字符串) List(列表) Hash(哈希) Set(无序集合) ZSet(有序集合sorted set) ...
计算机二级公共基础知识总结百度云,计算机二级公共基础知识总结详细版本[精]...
计算机二级公共基础知识总结详细版本[精] (15页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 15.9 积分全国计算机等级考试二级公共基础知识总结第一 ...

AG表格基础滚动分页-React版本

AG表格滚动分页文档

增添一条数据

删除数据

AG表格基础滚动分页-React版本相关推荐

最新文章

热门文章