如何根据另一列的值更改DxDataGrid(jQuery)的行颜色

核心使用DxDataGrid官方提供的onRowPrepared生命周期回调实现，这个钩子会在每一行（包括数据行、表头、汇总行）渲染完成时触发，不会出现排序、翻页、筛选后样式丢失的问题。

具体实现步骤 #

• 在组件初始化配置中添加onRowPrepared回调函数
• 回调内先判断行类型，跳过表头、汇总行、分组行等非业务数据行
• 从回调参数的data属性中读取目标判断列的取值
• 根据取值给当前行的DOM元素添加对应样式即可

完整代码示例 #

假设用来判断的列字段名为status，值为1时行显示绿色、值为0时行显示红色：

$("#gridContainer").dxDataGrid({
    // 保留你原有的配置项，比如数据源、列定义
    dataSource: businessData,
    columns: [
        { dataField: "id", caption: "编号" },
        { dataField: "status", caption: "状态" },
        // 其余业务列配置
    ],
    // 核心样式控制逻辑
    onRowPrepared: function(e) {
        // 只处理普通数据行
        if (e.rowType !== "data") return;

        // 读取目标列的取值，把status替换成你实际的字段名
        const currentValue = e.data.status;
        if (currentValue === 1) {
            e.rowElement.css("background-color", "#dcfce7");
            // 需要改文字颜色可以追加：e.rowElement.css("color", "#166534");
        } else if (currentValue === 0) {
            e.rowElement.css("background-color", "#fee2e2");
            // 需要改文字颜色可以追加：e.rowElement.css("color", "#991b1b");
        }
    }
});

优化建议 #

如果需要适配行hover、选中状态的样式，更推荐用自定义CSS类的方式实现，比直接写内联样式更容易维护：

1. 先定义自定义样式类

.grid-row-success {
    background-color: #dcfce7 !important;
}
.grid-row-danger {
    background-color: #fee2e2 !important;
}

2. 把回调里的样式设置换成添加类名的写法

onRowPrepared: function(e) {
    if (e.rowType !== "data") return;
    const currentValue = e.data.status;
    e.rowElement.removeClass("grid-row-success grid-row-danger");
    if (currentValue === 1) {
        e.rowElement.addClass("grid-row-success");
    } else if (currentValue === 0) {
        e.rowElement.addClass("grid-row-danger");
    }
}

注意：不要用jQuery手动选择表格行DOM加样式，DxDataGrid在排序、筛选、翻页、虚拟滚动时会重新渲染行节点，手动绑定的样式会直接失效，必须用官方提供的行渲染钩子实现。

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