仅当保存网格之前旧值和新值不同时，如何在编辑时比较和显示剑道脏标志 [英] How to compare and display kendo dirty flag upon editing only if the old value and new value are different before saving the grid

问题描述

在剑道网格中，当我更改值时，网格单元格中会显示剑道的脏标志.但是当我单击回到同一个网格单元并将其更改为以前的值(已经存在的值)时，脏标志仍然出现.

In a kendo grid, in grid cell when I change a value kendo's dirty flag is displayed. But then when I click back to the same grid cell and change it to the previous value (already existing value) the dirty flag still appears.

如何在保存前检查该值是否与之前的值相似并且不显示脏标志.

How can I check whether the value is similar to the previous value and not display the dirty flag before saving.

以下是我的剑道可编辑下拉菜单代码.

Below is my code for kendo editable dropdown.

function editCategoryDropDown(container, options) {
    var catObject = JSON.parse(ticketProjectCategoryObject.value);
    $('<div  id="categoryDDTreeView" class="dropDownTreeViewStyle"/>').appendTo(container);
    var catDropDownTreeView = $("#categoryDDTreeView").kendoExtDropDownTreeView({
        treeview: {
            dataSource: new kendo.data.HierarchicalDataSource({
                data: catObject
            }),
            //expended: true,
            loadOnDemand: false,
            change: function (e) {
                {
                    var dropDownTreeViewObj = $('#categoryDDTreeView').find('.k-input');
                    var nodeTitle = dropDownTreeViewObj.attr("title");
                    if (nodeTitle != null) {
                        options.model.Category = nodeTitle;
                        options.model.CategoryId = dropDownTreeViewObj.attr("nodevalue")
                        options.model.dirty = true;
                        container.addClass("k-dirty-cell");
                    }
                };
            }
        },
    }).data("kendoExtDropDownTreeView");
    var dropDownBox = catDropDownTreeView.dropDownList();
    dropDownBox.text(options.model.Category)
    var treeView = catDropDownTreeView.treeview();
    var node = treeView.findByText(options.model.Category.split("|").pop().trim());
    treeView.select(node);

}

推荐答案

这是一项有趣的任务，因此我投入了一些时间进行试验.考虑以下方法:

This is an interesting task, so I invested some time in experimenting. Consider the following approach:

• 在edit Grid 事件，将数据项的原始状态(e.model.toJSON())保存在某个变量中.toJSON 是需要剥离特定于 Kendo 的字段和方法，将数据项转换为纯 JavaScript 对象，并在数据项通过引用传递时中断否则将发生的自动值更新.

• in the edit event of the Grid, save the original state of the data item (e.model.toJSON()) in some variable. toJSON is needed to strip the Kendo-specific fields and methods, convert the data item to a plain JavaScript object and break the automatic value updates that will otherwise occur, as the data item is passed by reference.

edit: function(e) {
    var model = e.model;
    if (!originalDataItems[model.id]) {
        originalDataItems[model.id] = model.toJSON();
    }
}

在save 事件，将新的 dirty 值与原始数据项值进行比较.如果它们相同，则将自定义 CSS 类应用于表格单元格.您需要将代码包装在 setTimeout 中的 save 处理程序中，因为此事件在已编辑单元格关闭并切换回非编辑模式之前触发.

in the save event of the Grid, compare the new dirty values with the original data item values. If they are the same, apply a custom CSS class to the table cell. You will need to wrap the code in the save handler in setTimeout, because this event is fired before the edited cell has been closed and switched back to non-edit mode.

save: function(e) {
  setTimeout(function() {
    e.sender.tbody.find(".k-dirty-cell").each(function() {
      var cell = $(this);
      var field = e.sender.columns[cell.index()].field;
      var dataItem = e.sender.dataItem(cell.closest("tr"));

      cell.toggleClass("no-dirty",
          originalDataItems[dataItem.id][field] == dataItem[field]);
    });
  });
}

自定义 CSS 类可用于隐藏脏标记，如下所示:

The custom CSS class can be used to hide the dirty mark like this:

.no-dirty .k-dirty {
    display: none;
}

最后，当保存所有待处理的更改时，从 originalDataItems 集合中删除所有项目，即在 saveChanges 事件.

Finally, remove all items from the originalDataItems collection when all pending changes are saved, i.e. in the saveChanges event.

saveChanges: function() {
    originalDataItems = {};
}

这是一个完整的例子:

http://dojo.telerik.com/ivOBU

需要指出的是，即使脏标记将被隐藏，相应的数据项仍将是 dirty 并与远程数据服务同步.这是一个小问题，当 batch 使用编辑(如您的情况)，但如果您想防止不必要的数据传输，请增强 save 处理程序并重置未修改的数据项的 dirty 字段为 false.

One thing to point out is that even though the dirty marks will be hidden, the respective data item will still be dirty and subject to syncing with the remote data service. This is a minor issue when batch editing is used (as in your case), but if you want to prevent unnecessary data transfer, enhance the save handler and reset the unmodified data items' dirty field to false.

这篇关于仅当保存网格之前旧值和新值不同时，如何在编辑时比较和显示剑道脏标志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！