JqGrid页脚求和异常：CapacityInlakhs列显示0.000无法计算

核心问题 #

1. 列名重复：colModel中定义了两个name: 'CapacityInlakhs'的列，jqGrid无法区分重复列，直接导致求和逻辑失效。
2. 数据字段大小写不匹配：列名用CapacityInlakhs（首字母大写），但数据源中字段是capacityInlakhs（首字母小写），隐藏列无法正确绑定原始数值。
3. 求和对象错误：调用getCol时，默认获取的是显示列的HTML内容（即input元素的代码），而非输入框内的实际数值。

修复步骤 #

1. 移除重复列，统一列名逻辑 #

删除重复的隐藏列，保留一个存储原始数值的唯一列，显示列使用独立名称避免冲突：

colmodels = [
    // ... 其他列配置保持不变 ...
    {
        name: 'capacityInlakhs', // 与数据源字段名完全匹配（小写）
        hidden: true,
        sorttype: 'number',
        summaryType: 'sum' // 配置内置求和规则
    },
    {
        name: 'capacityDisplay', // 显示列使用唯一名称
        label: 'Capacity in lakhs',
        resizable: true,
        ignoreCase: true,
        formatter: function (cellvalue, options, rowobject) {
            // 给input生成唯一ID，避免DOM冲突
            return '<div class="text-center">' +
                '<span><input type="text" class="form-control number" id="capacityGridValue_' + options.rowId + '" data_Capacity="true" step=".00001" min="0" max="9999.00000" value="' + rowobject.capacityInlakhs + '"/></span>' +
                '</div>';
        } 
    }
]

2. 正确计算并设置页脚总和 #

方法一：利用jqGrid内置求和功能（适合初始加载求和）

依赖隐藏列的summaryType配置，直接获取内置求和结果：

loadComplete: function (data) {
    var $grid = $('#capacityGrid');
    $grid.jqGrid('footerData', 'set', { sizeRange: "Total" });
    // 从隐藏列获取内置求和值
    var sum = $grid.jqGrid('getCol', 'capacityInlakhs', false, 'sum');
    $grid.jqGrid('footerData', 'set', { capacityDisplay: sum.toFixed(3) }, false);
}

方法二：手动遍历输入框计算实时值（支持用户修改后更新总和）

监听输入框变化，实时计算所有行的数值总和：

gridComplete: function () {
    // ... 原有逻辑保持不变 ...
    
    // 添加输入框实时求和监听
    $(".number").on('input', function() {
        let total = 0;
        $(".number").each(function() {
            // 空值或非数值按0处理
            const val = parseFloat($(this).val()) || 0;
            total += val;
        });
        $('#capacityGrid').jqGrid('footerData', 'set', { capacityDisplay: total.toFixed(3) });
    });
},
loadComplete: function (data) {
    var $grid = $('#capacityGrid');
    $grid.jqGrid('footerData', 'set', { sizeRange: "Total" });
    // 初始加载时计算一次总和
    let total = 0;
    $(".number").each(function() {
        const val = parseFloat($(this).val()) || 0;
        total += val;
    });
    $grid.jqGrid('footerData', 'set', { capacityDisplay: total.toFixed(3) }, false);
}

3. 额外优化点 #

• 确保所有列的name属性唯一，这是jqGrid的基础要求；
• 数据源字段名与列名严格匹配（包括大小写），避免数据绑定失败；
• 移除输入框id的重复定义，通过拼接行ID生成唯一标识，避免DOM元素冲突。

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