datagrid - 如何处理 dojo 数据网格单元格更新，以便我可以将它们自动发布回服务器？

Question

我正在使用 dojo datagrid 来显示我的数据。当最终用户编辑单元格值时，应使用 ajax 调用在服务器中更新它(当焦点移出单元格时)。

否则，我应该为每一行设置一个编辑和更新/取消按钮来处理相同的功能。但我不知道如何将编辑和更新按钮放置在网格内并捕获它们的事件。

默认情况下，dojo 仅更新本地存储值(客户端)。 如何将更新的单元格值保存到服务器中？

我们需要编写任何重写方法来做到这一点吗？

我是道场新手。任何详细的解释或示例代码将不胜感激。

有人可以帮忙解决这个问题吗？

谢谢

问候，拉杰

Answer 1

为了能够将更新推送到服务器端，您必须重写 _saveCustom() 或 _saveEverything()。这是我用来保存更新的一段代码(经过一些清理)。

请注意，下面的代码依赖于私有(private) _getModifiedItems()，因为 DataGrid 接受内联版本。如果您确实知道修改项目的列表(因为编辑是在弹出窗口中完成的，并且您将项目 key 保存在某处)，则检索修改项目会更简单。

module.submitUpdates = function() {
    var store = <from a variable local to the module>
    if (store.isDirty() confirm("Updates to be persisted. Continue?")) {
        store._saveCustom = function(saveCompleteCallback, saveFailedCallback) {
            var modifiedItem = _getModifiedItems(store)[0];
            dojo.xhrPost( {
                headers: { "content-type": "application/json; charset=utf-8" },
                content: dojo.toJson(modifiedItem),
                handleAs: "json",
                load: function(response) {
                    if (response !== null && response.success) {
                        saveCompleteCallback();
                    }
                    else {
                        saveFailedCallback(response);
                    }
                },
                error: saveFailedCallback,
                url: "/API/<Object>"
            });
        };
        store.save( {
            onComplete : function() {
                module.loadCachingRuleList();
            },
            onError : function(errorData, request) {
                _reportUpdateFailure(errorData, errMsg);
            }
        });
    }
};

下面是当用户即将丢失更新的 DataGrid(因为他离开页面或因为他想要刷新网格内容)时用于获取所有更新项目的代码。

请注意，以下代码使用 Dojo 1.3。我还没有检查 Dojo 1.4 是否更容易...我希望 Dojo 1.5 中引入的 dojo.Stateful 能够简化它，否则我们将不得不等待 Dojo 1.6 ;)

var _getModifiedItems = function(store) {
    var modifiedItems = [];
    if (store !== null && store._pending !== null) {
        if (store._pending._modifiedItems !== null) {
            for (var modifiedItemKey in store._pending._modifiedItems) {
                if (store._itemsByIdentity) {
                    modifiedItems.push(store._itemsByIdentity[modifiedItemKey]);
                }
                else {
                    modifiedItems.push(store._arrayOfAllItems[modifiedItemKey]);
                }
            }
        }
        if (store._pending._newItems !== null) {
            for (var modifiedItemKey in store._pending._newItems) {
                if (store._itemsByIdentity) {
                    modifiedItems.push(store._itemsByIdentity[modifiedItemKey]);
                }
                else {
                    modifiedItems.push(store._arrayOfAllItems[modifiedItemKey]);
                }
            }
        }
    }
    return modifiedItems;
};

var _getDeletedItems = function(store) {
    var deletedItems = [];
    if (store !== null && store._pending !== null && store._pending._deletedItems !== null) {
        for (var deletedItemKey in store._pending._deletedItems) {
            if (store._itemsByIdentity) {
                deletedItems.push(store._itemsByIdentity[deletedItemKey]);
            }
            else {
                deletedItems.push(store._arrayOfAllItems[deletedItemKey]);
            }
        }
    }
    return deletedItems;
};

我希望这有帮助，A+，多姆