Question

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

这是我的代码：

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

Answer 1

我通过在kendo网格函数中添加此函数来解决。

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");
                    }
                }
            }
        });

Answer 2

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

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

示例

您可以在行模板中评估数据项并干净地输出给定的类。在这个例子中（可以在下面的jsfiddle链接中找到），用户有一个名字和年龄......如果年龄<= 30，他们就会得到'underthirty'类（实际上它应该是三十级）。

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

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

如何更改Kendo Grid行颜色

3 个答案: