javascript - 网格 "dirty"标志未更新

Question

我在手动设置/删除 Kendo 网格控件上的“脏标志”指示器时遇到问题。

我已将教程扩展到 preserve dirty indicators在 dataSource.change 事件期间对 value 字段进行额外验证:

1. 先前保存的 value(包含 id)已被修改为 0 - 这是有效的“脏标志” (e.items[0].id > 0 && e.items[0].value === 0)
2. 已输入大于 0 的 value - 这是有效的“脏标志”(e.items[0].value > 0)
3. value 的任何其他实例都不是有效的“脏标志”，因此应将其删除
4. 如果用户将 value 字段留空，即“null”，将值修改为 0 (if (!e.items[0].value) {e.项目[0].value = 0;})

应用这些更改后，change 事件现在看起来像:

change: function (e) {
    if (e.action == "itemchange") {                
        if ((e.items[0].id > 0 && e.items[0].value === 0) || e.items[0].value > 0) {
            e.items[0].dirtyFields = e.items[0].dirtyFields || {};
            e.items[0].dirtyFields[e.field] = true;
            _dirty = true;
        }
        else {
            if (!e.items[0].value) {
                e.items[0].value = 0;
            }
            e.items[0].dirty = false;
            e.items[0].dirtyFields = e.items[0].dirtyFields || {};
            e.items[0].dirtyFields[e.field] = false;
        }
        $("#grid").data("kendoGrid").refresh();
    }
}

进行这些更改后，我可以看到触发了 dirtyField 函数(它是值列的 template)，还可以看到相应的 提供 true/false 值并进行适当的返回(我认为应该从适当的单元格中设置/删除“脏标志”):

function dirtyField(data, fieldName){
    if(data.dirty && data.dirtyFields[fieldName]){
        return "<span class='k-dirty'></span>"
    }
    else{
        return "";
    }
}

但是，直到网格中的另一个单元格被修改后，“脏标志”才会被删除。

这是一个Dojo example来证明这个问题。为了复制:

• 在第二行 value 单元格中输入一个大于 0 的值(设置“脏标志”)
• 从第二行 value 单元格中删除值(“脏标志”仍然存在 -> 现在应该根据 change 事件逻辑消失)
• 在第三行 value 单元格中输入一个大于 0 的值(在当前单元格上设置“脏标志”，从第二行 value 单元格中移除“脏标志”)

Answer 1

您的 DataSource.change 事件在网格单元格关闭之前被调用。因此，您刷新网格和单元格更改未正确反射(reflect)在 UI 中。

您应该将网格刷新移动到网格 cellClose 事件。然后在单元格关闭并且一切正常后将调用网格刷新。

$("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    pageable: true,
    navigatable: true,
    height: 400,            
    columns: [
        { field: "value", title: "Value", editor: decimal_NumberEditor, format: '{0:n2}', attributes: { class: "editable-cell" }, template: "#=dirtyField(data,'value')# #:value#" }],
    editable: true,
    cellClose: function(e) {
        $("#grid").data("kendoGrid").refresh();
    }
});

这是一个带有事件日志记录的工作示例，以便更好地了解正在发生的事情。查看 JS 控制台:

http://dojo.telerik.com/ICIxUX/7