如何判断ASP.Net MVC KendoGrid复选框选中状态并更新数组

核心思路 #

KendoGrid的onChange事件中，不用直接遍历所有已选行覆盖数组，而是针对当前操作的单行判断选中状态，或者通过e.action区分批量操作类型，单独处理添加/移除逻辑，就能避免重复添加的问题。

具体实现代码 #

1. 绑定Grid的change事件 #

初始化Grid时指定事件处理函数：

$("#grid").kendoGrid({
    columns: [
        { selectable: true, width: 50 },
        // 其他列配置...
    ],
    change: onGridChange,
    // 其他Grid配置项...
});

2. 单行操作的事件处理 #

针对单个复选框的勾选/取消，直接判断当前行的选中状态：

let stations = [1, 2, 3]; // 初始数组

function onGridChange(e) {
    const selectedRows = e.sender.select();
    if (selectedRows.length === 0) return;

    // 获取当前操作行的数据模型，替换成你实际的主键字段名（比如Id）
    const dataItem = e.sender.dataItem(selectedRows[0]);
    const stationId = dataItem.Id;

    // 用KendoGrid内置API判断当前行是否选中
    const isSelected = e.sender.isSelected(selectedRows[0]);

    if (isSelected) {
        // 选中时：数组中不存在则添加
        if (!stations.includes(stationId)) {
            stations.push(stationId);
        }
    } else {
        // 取消选中时：从数组中移除对应值
        const index = stations.indexOf(stationId);
        if (index !== -1) {
            stations.splice(index, 1);
        }
    }

    // 可选：打印验证结果
    console.log("更新后的stations数组:", stations);
}

3. 兼容批量选择（全选框）的处理 #

如果需要支持全选/全取消的批量操作，通过e.action区分操作类型：

function onGridChange(e) {
    // 批量选中/取消逻辑
    if (e.action === "select" || e.action === "deselect") {
        // 获取所有操作涉及的ID集合
        const targetIds = e.sender.select().map(row => {
            return e.sender.dataItem(row).Id;
        }).get();

        if (e.action === "select") {
            // 批量选中：合并数组并去重
            stations = [...new Set([...stations, ...targetIds])];
        } else {
            // 批量取消：过滤掉取消的ID
            stations = stations.filter(id => !targetIds.includes(id));
        }
    } else {
        // 单行操作逻辑，同上面的单行处理代码
        const selectedRows = e.sender.select();
        if (selectedRows.length === 0) return;
        const dataItem = e.sender.dataItem(selectedRows[0]);
        const stationId = dataItem.Id;
        const isSelected = e.sender.isSelected(selectedRows[0]);

        if (isSelected) {
            if (!stations.includes(stationId)) stations.push(stationId);
        } else {
            const index = stations.indexOf(stationId);
            if (index !== -1) stations.splice(index, 1);
        }
    }

    console.log("更新后的stations数组:", stations);
}

关键注意点 #

• 确保Grid数据模型中有唯一标识字段（示例中用Id），且和stations数组中的值类型一致（比如都是数字或字符串），避免匹配失败。
• e.sender.isSelected(rowElement)是KendoGrid提供的原生API，能准确获取当前行的选中状态，替代手动判断DOM元素的选中属性，更可靠。

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