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

2023-10-27

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后调用即可,这点和正常模型不一致。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AG表格基础滚动分页-React版本 的相关文章

随机推荐

  • Python: 向下取整规则解释带有负号的除取整(//)和除取余(%)

    1 Python 中的 结果向下取整 例如 print 7 3 2 3333333 向下取整为 2 print 7 3 2 333333 向下取整为 3 print 7 3 2 333333 向下取整为 3 print 3 7 0 42 向
  • linux sed命令详解

    简介 sed 是一种在线编辑器 它一次处理一行内容 处理时 把当前处理的行存储在临时缓冲区中 称为 模式空间 pattern space 接着用sed命令处理缓冲区中的内容 处理完成后 把缓冲区的内容送往屏幕 接着处理下一行 这样不断重复
  • wireshark的usb抓包分析 1 - 抓取数据

    wireshark的版本为Version 3 2 4 v3 2 4 0 g893b5a5e1e3e 操作系统为Win10 64bit 安装过程要注意的是 有一步需要选择安装USBpcap 不装这个没法抓USB包 安装完成后需要重启电脑 1
  • MCU-串口通信协议

    MCU 串口通信协议 一 介绍 串行通信就像单车道 所有数据得一个一个通行 并行就像多车道 一次可以通行多辆车 MCU常用到的串口通信模块主要有两种 UART和USART UART 全称是Universal Asynchronous Rec
  • JetBrains软件使用经验(转载)

    版权声明 本文为博主原创文章 遵循 CC 4 0 BY NC SA 版权协议 转载请附上原文出处链接和本声明 本文链接 https blog csdn net I love you dandan article details 997124
  • [python爬虫] Selenium切换窗口句柄及调用Chrome浏览器

    因为我的博客是根据我每个阶段自己做的事情而写的 所以前言可能有点跑题 但它更有利于让我回忆这个阶段自己的所作所为 这篇文章主要介绍Selenium爬虫获取当前窗口句柄 切换窗口句柄以及调用Chrome浏览器几个知识点 其中获取当前句柄的方法
  • 三元操作符

    通常N元操作符指的是该操作符有N个操作数 如赋值操作符 它是一个二元操作符 所以它有两个操作数 左右各一个 又如减号 是一个二元操作符 但是当它作为负号 使用的时候 便是一个一元操作符 它表示负数 所以只有一个操作数 那么 三元操作符理应有
  • python--unicodedata用法

    python unicodedata用法 需要掌握的 1 将Unicode字符 chr 转换为等效的数值 以浮点形式返回 print unicodedata numeric 四 4 0 2 将unicode字符 chr 转换为其等效的数字值
  • 【C语言初学必看】猜数字游戏背后的知识

    目录 前言 1 先看主体部分 大体逻辑的部分 a 为什么用do while循环 b switch语句 c 关于scanf 中的 d s 和 printf 的关系 d menu 和game 函数为什么没有返回值 e 为什么 intput 在w
  • ABAP 351 - 动态编程

    作为面对对象的编程语言 ABAP也是支持动态编程的 ABAP351作为一门独立的课程介绍了类反射机制如何实现的过程 一 Field Symbols Field Symbols 字段符号 在ABAP编程中经常使用 实际上它具备以下几点特性 字
  • citespace教程

    参考视频教程 CiteSpace保姆级教程1 文献综述怎么写 研究生写文神器 手把手教你做科学知识图谱 以中国知网为例 哔哩哔哩 bilibili Citespace 从下载到图谱分析 详细教程 基于CNKI和WOS 陈同学 哔哩哔哩 bi
  • “数”说程序员|“后浪”涌袭下的开发者现状

    红网时刻长沙10月23日讯 见习记者 赵翼鹏 10月23日至25日 长沙 中国1024程序员节 将盛大举行 为期3天的会议将以开源为主议题进行讨论 并包括了十多场技术论坛 多位操作系统领域大咖还将史上首次在岳麓山展开对话 为什么会是1024
  • BUCK和BOOST电路详解

    1 BUCK电路 BUCK是一种降压型电路 他的特征就是输出电压低于输入电压 输入的电流是脉动的 输出的电流是连续的 BUCK电路的原理图如下图所示 当开关管Q1驱动为高电平时 开关管导通 电感L1被充磁储能 流过电感的电流线性增加 同时给
  • 《无码的青春》第七章 御姐

    之前我们各有各的故事 各有各的守护 然而今天却成了同一类人 失去了各自的女神 失去了自己的信仰 没有了牵挂 也不再需要对什么人负责 四个单身男人 在这个浮华的城市里尽情的释放着过剩的荷尔蒙 周末我们会聚在道哥的酒吧里 在浮光掠影的酒精和静静
  • python3的turtle画模仿3d星空,运动的恒星小宇宙

    本文参考原文 http bjbsair com 2020 03 25 tech info 6248 html 1 宇宙 2 代码实现条件 python3 3 第1步 第1步 导入模块 from turtle import from rand
  • 8.Xaml Border控件

    1 运行图片 2 运行源码
  • 自定义滚动条@莫成尘

    先看代码 复制使用即可 以下代码均可复制粘贴使用 我将以注释的形式解释代码左右 您将看到以下效果 原生的滚动条比较方正 不够圆滑 很大程度上不能满足我们的审美 有时候需要修改其样式 滚动条的高度将随着内容的多少自适应
  • GOTC演讲回顾

    5月27 28日 由上海浦东软件园 开放原子开源基金会 Linux基金会亚太区和开源中国联合发起的2023全球开源技术峰会 Global Open source Technology Conference GOTC 在上海圆满召开 大会聚焦
  • Redis IO 多路复用底层的实现原理

    文章目录 前言 用户空间与内核空间 PIO 和 DMA PIO DMA 缓存I O和直接I O 缓存I O的读写操作 缓存I O的优点 缓存I O的缺点 直接I O的优点 IO的访问方式 磁盘IO 网络IO 磁盘IO和网络IO对比 同步IO
  • AG表格基础滚动分页-React版本

    AG表格滚动分页文档 AG表格在使用滚动分页时 不可使用rowData属性做为数据源 传入表格 因为AG的滚动分页 使用的是特殊表模型 所有正常模型下的API有可能会失效 使用AG滚动分页时 需把正常数据模型替换成滚动分页数据模型 示例 t