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

AG表格滚动分页文档

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

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

示例：

    <Table
        columnDefs={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 = total
                            else if (total > params.endRow && lastRow < total) {
                                lastRow = params.startRow + data.length
                                if (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后调用即可，这点和正常模型不一致。