使用jquery / javascript更改Kendo网格中的行颜色

尼克拉斯·普伊·温格

我有一个显示警报列表的受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
        }
    });
}

我一辈子都无法弄清楚如何更改该行文本的颜色。有什么建议么?

尼克拉斯·普伊·温格

终于找到了解决方案:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用RowAction在Kendo MVC网格中更改行颜色

来自分类Dev

如何使用行索引更改剑道网格行的背景颜色

来自分类Dev

如何使用行索引更改剑道网格行的背景颜色

来自分类Dev

在 Kendo 网格中使用 Jquery 更改表头标题

来自分类Dev

使用CSS / JavaScript更改Kendo Chart工具提示文本的颜色

来自分类Dev

如何使用 jQuery 更改网格中的图像?

来自分类Dev

Kendo网格-悬停颜色更改无法单独在Google Chrome中使用

来自分类Dev

使用jQuery更改单击的表行的颜色

来自分类Dev

如何使用jQuery更改表格行颜色

来自分类Dev

使用JQuery更改颜色

来自分类Dev

使用jQuery更改颜色

来自分类Dev

使用jQuery仅更改div中*的颜色

来自分类Dev

使用 javaScript 更改背景颜色(请不要使用 jQuery)?

来自分类Dev

在jQuery中更改颜色

来自分类Dev

在jQuery中更改颜色

来自分类Dev

使用JQuery动态更改颜色

来自分类Dev

使用jQuery更改div的颜色

来自分类Dev

如何使用JavaScript / jQuery根据表中的值更改td背景颜色?

来自分类Dev

如何更改jQuery jTable的特定行中的背景颜色?

来自分类Dev

如何使用Javascript根据内容更改表格行颜色

来自分类Dev

在WPF中更改网格行背景颜色

来自分类Dev

使用rowSelected在Angular Kendo UI网格中设置初始选定的行

来自分类Dev

使用jquery / javascript单击自定义命令时,kendo Web ui网格批量编辑

来自分类Dev

如何使用剃刀语法在Kendo网格列模板中调用JavaScript函数

来自分类Dev

如何使用Angular中的if else语句更改表行的颜色?

来自分类Dev

在 jQuery 中更改背景颜色

来自分类Dev

使用纯javascript更改表格中单元格的颜色

来自分类Dev

使用javascript中的下拉菜单更改框颜色

来自分类Dev

使用JavaScript从下拉菜单中更改背景颜色

Related 相关文章

  1. 1

    使用RowAction在Kendo MVC网格中更改行颜色

  2. 2

    如何使用行索引更改剑道网格行的背景颜色

  3. 3

    如何使用行索引更改剑道网格行的背景颜色

  4. 4

    在 Kendo 网格中使用 Jquery 更改表头标题

  5. 5

    使用CSS / JavaScript更改Kendo Chart工具提示文本的颜色

  6. 6

    如何使用 jQuery 更改网格中的图像?

  7. 7

    Kendo网格-悬停颜色更改无法单独在Google Chrome中使用

  8. 8

    使用jQuery更改单击的表行的颜色

  9. 9

    如何使用jQuery更改表格行颜色

  10. 10

    使用JQuery更改颜色

  11. 11

    使用jQuery更改颜色

  12. 12

    使用jQuery仅更改div中*的颜色

  13. 13

    使用 javaScript 更改背景颜色(请不要使用 jQuery)?

  14. 14

    在jQuery中更改颜色

  15. 15

    在jQuery中更改颜色

  16. 16

    使用JQuery动态更改颜色

  17. 17

    使用jQuery更改div的颜色

  18. 18

    如何使用JavaScript / jQuery根据表中的值更改td背景颜色?

  19. 19

    如何更改jQuery jTable的特定行中的背景颜色?

  20. 20

    如何使用Javascript根据内容更改表格行颜色

  21. 21

    在WPF中更改网格行背景颜色

  22. 22

    使用rowSelected在Angular Kendo UI网格中设置初始选定的行

  23. 23

    使用jquery / javascript单击自定义命令时,kendo Web ui网格批量编辑

  24. 24

    如何使用剃刀语法在Kendo网格列模板中调用JavaScript函数

  25. 25

    如何使用Angular中的if else语句更改表行的颜色?

  26. 26

    在 jQuery 中更改背景颜色

  27. 27

    使用纯javascript更改表格中单元格的颜色

  28. 28

    使用javascript中的下拉菜单更改框颜色

  29. 29

    使用JavaScript从下拉菜单中更改背景颜色

热门标签

归档