jqGrid页脚合计列使用方法及动态创建合计列为空问题求助

我来帮你解决jqGrid页脚合计的问题，你遇到的id列合计为空的情况，大概率是因为缺少关键配置或者数据类型的问题，下面一步步给你梳理：

核心前提：开启页脚行 #

要让合计列显示出来，必须先开启jqGrid的footerrow配置，这是最容易被忽略的点。如果没有这个设置，即使你配置了summaryType和summaryTpl，页脚行也不会渲染，自然看不到合计结果。

修正后的代码示例 #

结合你的代码，我调整并补充了关键配置：

$grid.jqGrid({
    data: data,
    footerrow: true, // 启用页脚行，必填！
    userDataOnFooter: true, // 可选，帮助将计算结果映射到页脚
    colModel: [
        { name: "act", template: "actions" },
        { 
            name: "id", 
            width: 50, 
            summaryTpl: "Sum: {0}", 
            summaryType: "sum",
            formatter: "integer", // 确保列按数字格式处理，避免字符串无法求和
            align: "right",
            editrules: { number: true } // 强制验证数据为数字类型
        }
    ],
    // 其他必要配置，比如autowidth、height等
});

解决合计为空的关键排查点 #

1. 数据类型是否正确
   如果你的data里id字段是字符串类型（比如"1"、"2"），sum类型的合计会失效，结果为空或者0。你可以：

   • 提前把数据源中的id转成数值类型（比如data.forEach(item => item.id = parseInt(item.id))）
   • 或者通过colModel里的formatter和editrules强制处理数字格式

2. 动态更新数据后的合计刷新
   如果是后续动态添加/修改数据，默认的合计不会自动更新，你需要手动触发重新计算：

   • 如果你用的是free jqGrid，可以直接调用：

     $grid.jqGrid('recomputeFooter');
     

   • 旧版本jqGrid可以手动计算后设置页脚数据：

     var total = data.reduce((sum, item) => sum + item.id, 0);
     $grid.jqGrid('footerData', 'set', { id: `Sum: ${total}` });
     

3. 列是否可见
   确保id列没有设置hidden: true，隐藏列的合计也不会显示在页脚中。

验证示例 #

假设你的数据源是：

var data = [
    { id: 10, act: '' },
    { id: 20, act: '' },
    { id: 30, act: '' }
];

按照上面的配置，页脚的id列会显示Sum: 60，完全符合预期。

内容的提问来源于stack exchange，提问作者user2049855