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

Posted 2023-02-22

【中文标题】如何处理 dojo 数据网格单元更新，以便我可以将它们自动发布回服务器？

【英文标题】：How do I handle dojo datagrid cell updates so I can post them back automatically to the server?

【发布时间】：2011-02-11 15:43:18

【问题描述】：

我正在使用 dojo 数据网格来显示我的数据。当最终用户编辑单元格值时，它应该使用 ajax 调用在服务器中更新（当焦点离开单元格时）。

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

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

我们是否需要编写任何覆盖方法来做到这一点？

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

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

谢谢

问候， 拉杰

【参考方案1】：

这不是一个非常详细的解释，但是您应该重写处理用户数据条目的方法，因为我没有看到这方面的事件。所以基本上创建一个从数据网格继承的新类，在源代码中找到处理编辑的方法并覆盖它，给它一个额外的操作来将它发送回服务器。您还需要在该方法中调用数据网格的默认操作。

这里的一些信息（您可能已经知道）：

http://docs.dojocampus.org/dojox/grid/DataGrid#editing-data

我之前扩展过Dojo的默认组件，并不难。我发现检查 Dojo 源代码总是好的，并且在升级 Dojo 时要小心，以确保新版本不会破坏现有功能。

【参考方案2】：

为了能够在服务器端推送更新，您必须覆盖 _saveCustom() 或 _saveEverything()。这是我用来保持更新的一段代码（有点清理）。

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

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+，多姆

【讨论】：

在这种情况下module 是什么？

【参考方案3】：

为避免入侵您的 dojo 库，只需切换到 YUI2 数据表即可；它的单元格编辑器接受将您的编辑发送到您的服务器的 asyncsubmitter 功能 这是文档中的描述

异步提交者

功能

实现者定义的函数，可以将输入值提交给服务器。此函数必须接受参数 fnCallback 和 oNewValue。提交完成后，该函数还必须调用 fnCallback(bSuccess, oNewValue) 以完成 CellEditor 中的保存例程。此函数还可用于执行额外的验证或输入值操作。 YUI2DataTable