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 原生的客户端分页能力，传入全量数据即可，组件会自动处理翻页、计算总页数，彻底避免逻辑冲突。

修正后的查询按钮完整代码

javascript 复制代码

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 方法加载全量数据，性能更好：