3

我正在使用一个 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
}

提前致谢

4

1 回答 1

0

您可以使用网格的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

于 2013-10-02T10:52:43.300 回答