如何根据 Kendo UI Grid 中行的值更改行的颜色答案

【问题标题】：How to change color of row depending on a row's value in a Kendo UI Grid如何根据 Kendo UI Grid 中行的值更改行的颜色
【发布时间】：2015-06-12 05:44:23
【问题描述】：

我有一个 Kendo UI Grid，它包含四列：

Highlight  MAC   Time  Message

Highlight 列可以包含值“yes”或“no”，此列是隐藏的。

我需要创建一个行模板，如果值为 yes，将突出显示（更改颜色或其他内容）该行。

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
    <style>
        .change-background {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="grid"></div>
    <script type="text/javascript">
        var ds = new kendo.data.DataSource({
            data: [{
                Highlight: "Yes",
                MAC: "111",
                Time: "aaa",
                Message: "a1"
            }, {
                Highlight: "No",
                MAC: "222",
                Time: "bbb",
                Message: "b2"
            }]
        });
        $("#grid").kendoGrid({
            dataSource: ds,
            dataBound: onDataBound,
            columns: [
                    { hidden: true, field: "Highlight" },
                    { field: "MAC" },
                    { field: "Time" },
                    { field: "Message" }
            ],
        });

        function onDataBound(e) {
            var grid = $("#grid").data("kendoGrid");
            var data = grid.dataSource.data();
            $.each(data, function (i, row) {
                if (row.Highlight == "Yes") {
                    var element = $('tr[data-uid="' + row.uid + '"] ');
                    $(element).addClass("change-background");
                }
            });
        }
    </script>
</body>
</html>

如果有任何问题，请告诉我。

【讨论】：

感谢 Jayesh 的回答，但我需要使用行模板来实现这一点
这适用于网格，但不是 TreeList 小部件的可行解决方案，因为导致 tr 重新呈现的操作（例如展开和折叠）会破坏您的自定义类已添加。您还必须在 expand 和 collapse 事件处理程序中运行 onDataBound 函数，这对于大型数据集开始变得缓慢。

【解决方案2】：

您可以在行模板中应用条件，尝试如下所示

 $("#grid").kendoGrid({
        dataSource: ds,
        rowTemplate: '<tr class="#:Highlight  ==\"Yes\"? \"red\" : \"white\"#" data-uid="#= uid #"><td>#: MAC  #</td><td>#:Time  #</td><td>#:Message#</td></tr>'
    });

数据源

var ds = new kendo.data.DataSource({
    data: [{
        Highlight  : "Yes",
        MAC   :"...",
        Time  :"...",
        Message:"...."
    }, {
        Highlight  : "No",
        MAC   :"...",
        Time  :"...",
        Message:"...."
    }]
});

【讨论】：

太棒了！但是如果你想突出显示 2 种颜色怎么办.. 假设你有一个值为 1,2 或 3 的 int 并且你想突出显示 2 或 3？