在剑道网格中手动维护脏单元格标记

Question

我有一个可编辑的剑道网格，我可以在其中编辑一个单元格，该网格将红色标记添加到单元格的左上角。

我转到另一个页面，然后返回进行编辑的页面，红色标记消失了，但单元格中新添加的值仍然存在。我在 Kendo 网站上看到了对此的回应，其中建议：“为了在每次重新启动网格时显示“脏标志”，它必须遍历所有模型，检查所有字段是否已更改且可见网格单元格。”

我假设这需要在网格的DataBound() 事件上完成（当我切换页面时似乎会触发），我将手动将k-dirty-cell 类应用于单元格，但我不知道了解如何在代码中完成这项工作。任何想法都非常感谢。

$(function () {
                     $("#grid").kendoGrid({
                         height: 550,
                         scrollable: true,
                         sortable: true,
                         filterable: true,
                         resizable: true,
                         reorderable: true,
                         groupable: false,
                         editable: true, // enable editing
                         columns: [
                                    //REMOVED TO SHORTEN EXAMPLE    
                                    ],
                         toolbar: [{name: "save", text: "Save All Records"}, "cancel"], 
                         dataSource: {
                             schema: {
                                 data: "d", 
                                 total: function(data) {
                                    return data.d.length;
                                 },
                                 model: { 
                                     //REMOVED TO SHORTEN EXAMPLE  
                                     }
                                 }
                             },
                             batch: true,
                             pageSize: 10,
                             transport: {
                                 read: {

                                 },
                                 parameterMap: function (data, operation) {
                                     if (operation == "read") {
                                      //WEB SERVICE CALLS REMOVED... YOU GET THE POINT
                                     }
                                     else if(operation == "update") {
                                       //WEB SERVICE CALLS REMOVED... YOU GET THE POINT 
                                     }
                                 }
                             },
                         },
                         selectable: true,
                         pageable: true,
                         dataBound: function () 
                         {
                              //THIS IS FIRED WHEN I CHANGE PAGEs BUT
                              //NOT SURE WHAT CODE GOES HERE TO 
                              //REAPPLY DIRTY CELL MARKER
                 };

Answer 1

数据绑定事件是重新应用它的好地方，但我记住，当循环遍历网格的 dataItems 时，每一行都有一个脏标志，但不是每个字段。

很有可能我不知道有一种方法可以仅引用网格中的未决更改，但我编写了一个小系统，以便在更精细的级别上跟踪此类更改。

在我的系统中，我将网格的未决更改存储在一个名为 PendingChanges 的全局变量中。

然后我指定两个事件。第一个是网格数据源中的change event。此代码存储您需要从刚刚发生的更改中获得的信息：

    var PendingChanges = [];
    function GridEdit(e) {
        var cellHeader = $("#grid").find("th[data-title='" + e.field + "']");
        if (cellHeader[0] != undefined) {
           var pendingChange = new Object();
           //Holds field name
           pendingChange.PropertyName = e.field;
           //Keeps track of which td element to select when re-adding the red triangle
           pendingChange.ColumnIndex = cellHeader[0].cellIndex;
           //used to pull row.  Better than the row's id because you could have
           //multiple rows that have been inserted but not saved (ie. all have
           //ID set to 0
           pendingChange.uid = e.items[0].uid;
           //Remember to clear this out after you save
           PendingChanges.push(pendingChange);
        }
    }

然后，我使用dataBound event 检查周围有哪些待定更改，并将相关单元格设置为显示红色三角形：

function GridDataBound(e) {
    for (var i = 0; i < PendingChanges.length; i++) {
        var row = this.tbody.find("tr[data-uid='" + PendingChanges[i].uid + "']");
        var cell = row.find("td:eq(" + PendingChanges[i].ColumnIndex + ")");

        if (!cell.hasClass("k-dirty-cell")) {
            cell.addClass("k-dirty-cell");
            cell.prepend("<span class='k-dirty'></span>");
        }
    }
}

在上面的代码中this指的是The widget instance which fired the event.。这直接来自 Kendo UI Docs。

希望这至少可以为您指明正确的方向。如果您正在保存网格，请不要忘记在成功保存后清除 PendingChanges 数组。我建议为此使用 RequestEnd 事件。