javascript - 剑道ui网格背景变化事件

Question

我正在使用一个 Kendo UI Grid，它由于数据绑定(bind)事件中的条件而改变了每行的 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