KingFusion系列34-KingFusion表格控件翻页问题分析与解决

今天在用KingFusion开发MES系统的过程中遇到表格控件翻页时显示异常的情况KingFusion开发平台中的表格控件查询后显示有11页内容点击下一页翻页按钮第一下点击正常第二下点击后图表无数据。问题根本结论遇到的翻页异常核心原因是手动编写的客户端分页逻辑与 KingFusion 底层 EasyUI Datagrid 的原生分页机制产生了严重的状态冲突两次翻页后分页器的事件绑定、数据总量、页码状态彻底错乱最终表现为表格无数据、分页信息异常变为 1 页共 50 条。详细原因拆解1. 分页逻辑重复实现原生与自定义逻辑冲突EasyUI Datagrid 开启pagination: true后如果传入全量本地数据组件会自动完成客户端分页自动计算总页数、自动处理翻页切片完全不需要手动写onSelectPage和slice逻辑。手动重写了分页器的onSelectPage事件相当于在原生分页机制之上又套了一层自定义分页两套逻辑同时运行、互相覆盖状态是问题的根源。2.loadData传入单页数据破坏组件内部总数据量在翻页回调中用loadData(data1.slice(start, end))只传入了单页的 50 条数据。这会让 Datagrid 内部认为「全量数据就只有这 50 条」原生逻辑会自动把分页总条数改成 50、总页数改成 1。虽然你紧接着用pager.pagination(refresh)手动把总条数改回了 535但这只是修正了表面显示组件内部的状态、事件绑定已经被原生逻辑重置。3. 两次翻页后状态彻底错乱的过程初始查询手动设置第一页数据手动绑定自定义翻页事件手动设置总条数 535此时表面状态正常。第一次翻页第 2 页触发你写的自定义事件 → 加载第二页 50 条 → 原生逻辑立刻把总条数改成 50、页码改成 1 → 你的refresh又把显示改回 2 页、535 条。这个过程极快用户看不到异常但分页器的onSelectPage事件已经被原生逻辑重置回默认函数。第二次翻页第 3 页此时触发的已经是原生的翻页逻辑不再是你写的自定义函数。原生逻辑发现当前表格只有 50 条数据、每页 50 条判定只有 1 页于是直接回退到第 1 页、总条数 50且没有全量数据可以切片最终表格显示为空。4. 额外风险点每次查询都执行$(id).datagrid({...})重新初始化整个组件会销毁原有事件和状态存在残留风险。属性面板中onLoadSuccess已经绑定了脚本而每次loadData都会触发该事件。如果事件内有数据重置、重新初始化等逻辑会进一步加剧分页状态错乱。修复方案推荐原生分页最稳定直接删掉所有手动分页代码使用 Datagrid 原生的客户端分页能力传入全量数据即可组件会自动处理翻页、计算总页数彻底避免逻辑冲突。修正后的查询按钮完整代码var c_Area CBox区域.GetCurrentText(); var c_ProcessName Cbox工序名称.GetCurrentText(); var c_VariableName Cbox变量名称.GetCurrentText(); $Variable.pageName this.getName(); var condition { c_Area: c_Area, c_ProcessName: c_ProcessName, c_VariableName: c_VariableName }; var M { type: 2, condition: condition }; requestCalculationPost($System.RFM_SY, SY_ProcessVariable, M, function (res) { if (res.Code 0 res.errorCode 0) { var resdata res.records || []; if (resdata.length 0) { $Function.tip(info, 未找到相关信息); } var id Datagrid1.id; // 核心修改直接传入全量数据原生自动分页无需手动切片 $(id).datagrid({ fitColumns: true, pagination: true, pageSize: 50, // 与你界面选择的每页条数保持一致 pageList: [10,20,30,40,50], data: resdata }); } else { $Function.tip(error, res.message); } });额外检查与优化建议检查onLoadSuccess事件打开该事件的脚本确认里面没有重新加载数据、重置分页、重新初始化表格的逻辑如果有同步删除或调整。移除重复初始化如果查询按钮只会点击一次无需每次都$(id).datagrid({...})全量初始化可以改用loadData方法加载全量数据性能更好// 替换上面的初始化代码仅更新数据 $(id).datagrid(loadData, resdata);数据量较大时的优化如果后续数据量超过 2000 条建议改成服务端分页由 SQL 执行分页查询前端只接收单页数据性能更优。修改后重新测试翻页无论点多少次下一页都会稳定正常。