3

次のようなデータバインドイベントの条件により、各行の背景色を変更する剣道UIグリッドを使用しています:

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 に答える