Question

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

Highlight  MAC   Time  Message

Highlight列可以包含值“是”或“否”，此列已隐藏。

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

Answer 1

请尝试使用以下代码段。

<!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>

如果有任何疑虑，请告诉我。

Answer 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:"...."
    }]
});

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

2 个答案: