使用JavaScript/jQuery获取DevExpress网格复选框选中状态及行信息

嘿，针对你在DevExpress网格里处理未绑定复选框列的需求，我来分享些更靠谱的实现思路——毕竟直接用原生DOM操作控件元素，很容易踩控件渲染机制的坑，比如分页、过滤后DOM元素变化导致选中状态丢失之类的问题～

一、优先使用DevExpress网格API（最稳定的方案） #

DevExpress的DataGrid本身提供了专门的选中行管理API，比原生DOM选择更可靠，尤其是在网格有分页、虚拟滚动、过滤等场景下。

步骤1：配置未绑定复选框列 #

在网格的列定义中，给复选框列设置标识，并通过cellTemplate渲染复选框，同时关联网格的选中行API：

// 假设你的网格容器ID是gridContainer
$("#gridContainer").dxDataGrid({
    columns: [
        {
            name: "selectDamage",
            caption: "选择",
            type: "boolean",
            allowSorting: false,
            // 用cellTemplate渲染未绑定的复选框
            cellTemplate: function(container, options) {
                $("<input>")
                    .attr("type", "checkbox")
                    .prop("checked", options.component.isRowSelected(options.key))
                    .appendTo(container)
                    .on("change", function() {
                        // 调用网格API同步行选中状态
                        options.component.selectRowsByKey(options.key, this.checked);
                    });
            }
        },
        // 其他业务列...
    ],
    // 可选：开启多选模式（如果需要批量选中）
    selection: { mode: "multiple" }
});

步骤2：获取选中行并执行对应方法 #

当需要触发业务逻辑时，直接调用网格API获取选中行的完整数据，就能精准知道选中的是哪一行：

// 获取网格实例
const gridInstance = $("#gridContainer").dxDataGrid("instance");
// 获取选中行的完整数据
const selectedRows = gridInstance.getSelectedRowsData();
// 或者只获取选中行的主键
const selectedKeys = gridInstance.getSelectedRowKeys();

// 遍历选中行执行不同方法
selectedRows.forEach(rowData => {
    console.log("选中行的主键：", rowData.Id);
    // 根据行数据判断调用对应的方法
    if (rowData.Status === "Damaged") {
        handleDamagedRow(rowData);
    } else {
        handleNormalRow(rowData);
    }
});

二、如果必须用原生DOM操作（优化你的原有代码） #

如果因为特殊原因要保留原生DOM操作，一定要给复选框绑定行的唯一标识，确保能关联到对应的行数据：

// 在cellTemplate中给复选框绑定行主键
cellTemplate: function(container, options) {
    $("<input>")
        .attr("type", "checkbox")
        .attr("data-row-key", options.key) // 把行主键存在data属性中
        .appendTo(container);
}

// 之后获取选中项时：
const checkedItems = $("input[type='checkbox']:checked").map(function() {
    const rowKey = $(this).data("row-key");
    // 通过主键获取行数据
    const rowData = gridInstance.getRowDataByKey(rowKey);
    return rowData;
}).get();

// 执行对应方法
checkedItems.forEach(row => {
    if (/* 自定义判断条件 */) {
        yourMethodA(row);
    } else {
        yourMethodB(row);
    }
});

三、关键注意点 #

• 永远优先使用控件原生API：DevExpress网格的虚拟滚动、分页等机制会频繁销毁重建DOM元素，直接操作DOM很容易导致选中状态丢失或关联错误。
• 绑定唯一标识：不管用哪种方案，一定要把复选框和行的主键关联起来，这是准确识别选中行的核心。
• 事件绑定要精准：在cellTemplate内部绑定复选框的change事件，比外部用事件委托更可靠，能直接拿到当前行的上下文。

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