如何更改 Kendo Grid 行颜色答案

【问题标题】：How to change Kendo Grid row colours如何更改 Kendo Grid 行颜色
【发布时间】：2014-02-26 23:39:38
【问题描述】：

我想设计我的剑道网格，每行都有颜色。如果数据库中有警报，这些行必须是红色的，否则它们必须是绿色的。

这是我的代码：

public JsonResult Getdata()
{
    var reports = db.ActivityLog.OrderBy(c => c.dateTime).ToList();
    var collection = reports.Select(x => new
    {
        username = x.uName,
        location = x.locName,
        devices = x.devName,
        alarm = x.alarm
    });
    return Json(collection, JsonRequestBehavior.AllowGet);
}

我的看法：

function handleDataFromServer() {

    $("#grid").data("kendoGrid").dataSource.read();
}

window.setInterval("handleDataFromServer()", 10000);

$(document).ready(function () {
    $("#grid").kendoGrid({
        sortable: true,
        pageable: {
            input: true,
            numeric: false
        },
        selectable: "multiple",
        dataSource: {
            transport: {
                read: "/Home/Getdata",
                type: "json"
            }
        },
        columns: [
                        { field: "username", width: "80px" },
                        { field: "location", width: "80px" },
                        { field: "devices", width: "80px" },
                        { field: "alarm", width: "80px" }]
    });
});

【问题讨论】：

标签： jquery kendo-ui kendo-grid client-side

【解决方案1】：

我通过在剑道网格函数中添加这个函数来解决。

columns: [
                    { field: "username", width: "80px" },
                    { field: "location", width: "80px" },
                    { field: "devices", width: "80px" },
                      { field: "alarm", width: "80px" }],
dataBound: function () {
                dataView = this.dataSource.view();
                for (var i = 0; i < dataView.length; i++) {
                    if (dataView[i].alarmID!=null) {
                        var uid = dataView[i].uid;
                        $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("alarm");  //alarm's in my style and we call uid for each row
                    }
                    else if (dataView[i].message!=null) {
                        var uid = dataView[i].uid;
                        $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("reason");
                    }
                }
            }
        });

【讨论】：

不错的解决方案。它的好处是我不必更改网格定义中的 columns[] 设置，并将其替换为行模板。 +1！您正在使用对 $('#grid tbody') 的直接引用。我会用这个替换它： dataBound:function(e){e.sender.element.find("tr..")} 然后你可以在几个网格上重用这个函数，它看起来更干净imho
这个解决方案要好得多，因为您可以稍后添加列，而不必担心显示。另外：如果您添加@JDC 解决方案，该解决方案将在每个网格中完全可重用。谢谢你们！
您可以使用this.tbody 而不是$("#grid tbody") 来启用更通用的解决方案

【解决方案2】：

您可以使用 RowTemplate，并在该 RowTemplate 中根据您提供的任何条件评估给定行的 css 类。然后，css 类可以具有适合该行的样式。例如，可以将“no-alarm”或“with-alarm”放在 'td' 上并设置背景颜色。

http://demos.telerik.com/kendo-ui/web/grid/rowtemplate.html

示例

您可以在行模板中评估您的数据项并干净地输出给定的类。在此示例中（可在下面的 jsfiddle 链接中找到）用户有姓名和年龄...如果年龄

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td class='#= age <= 30 ? "underthirty" : "overthirty"#'>
            <strong>#= name #</strong>
        </td>
        <td>
            #= age #
        </td>
    </tr>
</script>

http://jsfiddle.net/blackjacketmack/t7fF2/1/

【讨论】：

如何确定行的颜色？例如，如果警报不为空，则行为绿色...我认为这不能解决我的问题
我添加了一个示例...基本上，您可以在行模板中评估对象的属性（例如使用内联“if”语句）并输出适当的类。我喜欢这个解决方案，因为它非常干净，并且保持样式（css）接近结构（html）。
为什么这不被接受...2年后不少于？很遗憾看到有一点 -15 的活动，但是拿走一个已接受的答案并将其应用到您自己的答案中感觉有点好笑。

【解决方案3】：

你也可以使用kendoGrid的dataBound

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/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/2014.3.1411/js/kendo.all.min.js"></script>
<style>
  .red {
    background-color: red
  }
    .green {
    background-color: green
  }
</style>
</head>
<body>
<div id="grid"></div>
<script>
var grid = $("#grid").kendoGrid({
  columns: [ 
    {
        field: "name",
        title: "Name",
        },
         {
    field: "title",
    title: "Title"
    }
   ],
  dataSource: [ { name: "Jane Doe", title: "Dr. Dr." }, { name: "John Doe", title: "Senior Citizen" }],
  dataBound: function(e) {
                var items = this._data;
                var tableRows = $(this.table).find("tr");
                tableRows.each(function(index) {
                    var row = $(this);
                    var Item = items[index];
                    if (Item.name !== "Jane Doe") {
                        row.addClass("green");
                    }else{
                        row.addClass("red");
                    }
                });
    }
}).data("kendoGrid");
</script>
</body>
</html>

【讨论】：