KendoUI Grid ClientFooterTemplate函数全选时返回值未正常显示问题

安全阿岳

2026-10-6

问题根本原因

Kendo Grid的ClientFooterTemplate仅会在数据源触发变更事件、或Grid主动执行重绘/刷新操作时，才会重新计算并更新表尾内容。你单独勾选单行复选框时，操作隐式触发了关联的行状态变更连带的footer刷新逻辑；但全选复选框的点击事件仅修改了所有复选框的选中状态，没有主动触发Grid表尾的重绘操作，所以虽然函数计算返回值正确，但界面不会同步更新。

修复方案

1. 全选逻辑末尾主动触发Grid刷新

在你的全选复选框点击事件回调末尾，添加代码强制Grid重绘，触发表尾重新计算渲染：

// 全选操作逻辑示例
$("#headerCheckAll").on("click", function() {
    const isChecked = $(this).is(":checked");
    // 修改复选框状态后主动触发change事件，同步状态到Grid数据
    $(".chkbx").prop("checked", isChecked).trigger("change");
    // 强制Grid刷新，更新表尾
    $("#grid").data("kendoGrid").refresh();
})

如果不需要重新请求后端接口，用refresh()方法即可；如果需要同步后端数据，可以换成$("#grid").data("kendoGrid").dataSource.read()。

2. 优化现有求和函数（可选，提升性能）

删除原有冗余的重复获取Grid实例、索引遍历逻辑，优化后代码如下：

function check_sum_ook09(a) {
    const grid = $("#grid").data("kendoGrid");
    if (!a) {
        // 手动勾选模式：统计选中行字段值
        let sum = 0;
        $(".chkbx:checked").each(function() {
            const dataItem = grid.dataItem($(this).closest("tr"));
            sum += dataItem.OOK_09 || 0;
        });
        return sum.toLocaleString("ko-KR");
    } else {
        // 全选模式：统计当前页所有行字段值
        let sum = 0;
        grid.dataSource.view().forEach(row => {
            sum += row.OOK_09 || 0;
        });
        return sum.toLocaleString("ko-KR");
    }
}