Kendo 网格可编辑高亮颜色

Question

我有这个 kendo demo here，希望我能实现，突出显示的颜色只在编辑的行上出现一次。当前，当我编辑多行时，突出显示的颜色出现重复。如何解决这个问题？感谢您的帮助。

Answer 1

当你已经这样修改它时，你可以按行索引重置颜色，如果它 even 将它设置为灰色，如果它 odd 将它设置为白色，如果修改则将它设置为蓝色:

function highlightBlue() {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource.data();

    $.each(data, function (i, row) {
        var item = $('tr[data-uid="' + row.uid + '"]');
        if (item[0].rowIndex % 2 !== 0) {
            item.css("background-color", "#f6f6f6");
        } else {
            item.css("background-color", "white");
        }
        if (row.Modified == "Y") {
            item.css("background-color", "#64B5F6");
        }
    });
}

您修改后的版本：highlight row

编辑：

为了方便起见，您可以在单元格 select 上添加 class 并在单元格关闭时删除 class。

<style>
    .highlight {
      background-color: red !Important;
    }
</style>
.....
edit: function(e){
    $(e.container[0]).closest("tr").addClass("highlight");
},
cellClose: function(e) {
    $(e.container[0]).closest("tr").removeClass("highlight");
}

通过这种方式我们保留了背景颜色，这里是更新的代码： On cell open and close

Kendo 网格可编辑高亮颜色

Kendo Grid editable highlighted color

javascript

kendo-ui

kendo-grid