使用jquery / javascript更改Kendo網格中的行顏色

Question

我有一個顯示警報列表的ajax綁定網格。 基於行對象中的某些條件，我需要更改行的顏色。 這之前，當我的網格是服務器綁定時（我知道這是它應該工作的方式），但由於更改，網格需要使用ajax更新。 這是我的網格，以及服務器綁定時的工作原理（注意我已更改為.Ajax() ：

@(Html.Kendo().Grid(Model.Alarms)
      .Name("grid")
      .DataSource(dataSource => dataSource
          .Ajax()
                  .ServerOperation(false)
                  .Model(m => m.Id(s => s.AlarmComment))
                  .Read(read => read.Action("Alarms_Read", "Alarms", new { id = Model.ViewUnitContract.Id }).Type(HttpVerbs.Get))
                  .AutoSync(true)
                  .ServerOperation(true)
      )
      .RowAction(row =>
      {
          if (row.DataItem.DateOff == null && row.DataItem.DateAck == null)
          {
              row.HtmlAttributes["style"] = "backgrcolor:red";
          }
          if (row.DataItem.DateOff != null && row.DataItem.DateAck == null)
          {
              row.HtmlAttributes["style"] = "color: green";
          }
          if (row.DataItem.DateOff == null && row.DataItem.DateAck != null)
          {
              row.HtmlAttributes["style"] = "color: blue";
          }
      })
      .Columns(col =>
      {
          col.Bound(p => p.DateOn).Format("{0:u}").Title("Date");
          col.Bound(p => p.Priority).Width(50);
          col.Bound(p => p.ExtendedProperty2).Width(100).Title("Action");
          col.Bound(p => p.AlarmTag).Title("Name");
          col.Bound(p => p.AlarmComment).Title("Comment");
          col.Bound(p => p.ExtendedProperty1).Title("AlarmID");
          col.Bound(x => x.DateOff).Title("Value");
      })
      .HtmlAttributes(new {style = "height:430px;"})
      .Events(e => e.DataBound("setColors"))
      )

現在，這就是我在腳本中所做的事情：

function setColors() {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource.data();

    $.each(data, function(i, row) {
        if (row.DateOff != null && row.DateAck == null) {
           // Add color to that rows text
        }
    });
}

我不能為我的生活弄清楚如何改變那一行文本的顏色。 有什么建議么？

Answer 1

終於找到了解決方案：

function setColors() {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource.data();

    grid.tbody.find('>tr').each(function () {
        var dataItem = grid.dataItem(this);
        if (dataItem.DateOff == null && dataItem.DateAck == null) {
            $(this).css('color', 'red');
        }

        if (dataItem.DateOff != null && dataItem.DateAck == null) {
            $(this).css('color', 'green');
        }

        if (dataItem.DateOff == null && dataItem.DateAck != null) {
            $(this).css('color', 'blue');
        }
    });