Question

我正在使用Kendo UI Grid，由于数据绑定事件中的条件，正在更改每行的bg颜色，如下所示：

function onDataBound(e) {

    var grid = $("#Software").data("kendoGrid");
    var gridData = grid.dataSource.view();

    for (var i = 0; i < gridData.length; i++) {
        var currentUid = gridData[i].uid;
        if (gridData[i].CategoryID == 1) {
            var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            $(currenRow).addClass("green");
        }
        else if (gridData[i].CategoryID == 2 ){
            var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            $(currenRow).addClass("red");
        }
        else {
            var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            $(currenRow).addClass("yellow");
        }
    }
}

我有一个自定义列，其中有3个按钮可用于分类。我现在要做的是，当点击其中一个按钮时，更改行的背景颜色。

当网格重新加载时，背景颜色会发生变化，但这需要太长时间，因为网格中充满了大量数据。

我只想添加例如css类“绿色”到受影响的行。

function SetGreen(sid, cid) {

    var grid = $("#grid").data("kendoGrid");

    cid =1;
    var url = '@Url.Action("SetMethod","SetController")';

    $.post(url, { SID: sid, CID: cid });

    grid.saveChanges();

    //right here I want to set the bg color for the affected row
}

提前致谢

Answer 1

您可以使用网格的rowTemplate来设置为每个数据项呈现的表行（tr）元素的CSS类。像这样：

var categoryClassNames = {
  1: "red",
  2: "green"
};

$("#grid").kendoGrid({
  dataSource: [
    { Category: 1 },
    { Category: 2 },
    { Category: 1 }
  ],
  rowTemplate: "<tr data-uid='#=uid#' class='#= categoryClassNames[Category]#'>" + 
                 "<td>#= Category #</td>" + 
               "</tr>"
});

要更新特定的表格行，您可以使用以下代码：

var grid = $("#grid").data("kendoGrid");
var itemToUpdate = grid.dataSource.at(1); // we will update the second item

itemToUpdate.Category = 1;

$("#grid tr[data-uid='" + itemToUpdate.uid + "']").removeClass("green").addClass("red");

这是一个现场演示：http://jsbin.com/iNExotO/2/edit

kendo ui网格背景改变事件

1 个答案: