JqG​​rid：在保存时将所有网格数据（包括所有行）发送到服务器

Question

我们在项目中大量使用 jqGrid。我们有这个非常独特的要求，我正在调查是否真的有针对特定用例的任何解决方案，并且需要一些输入。

场景如下：

1. jqGrid 加载从服务器加载的数据（通过 Spring）。
2. 网格中的第一行允许您向网格中添加新行（新添加在本地进行，不会持久化到数据库中）。
3. 每一行都有一个内嵌保存和删除图标。单击 inline-save 图标后，网格数据将保存在本地（即更改不会反映到 DB）。单击 inline-delete 图标时，该行将在本地删除（更改不会保存到数据库中）。
4. 每一行都是可拖动的，因此它们的位置可以互换（但位置不会立即保存到数据库中）。
5. 就在 jqGrid 下方，我们有一个保存按钮，单击该按钮时，会将所有网格数据发送到服务器。

上述用例真的有解决方案吗？即从数据库加载网格数据，然后在本地对网格进行更改（添加/编辑/删除/重新排序）。最后将数据保存回数据库。

如果有任何实现此用例的示例，我将不胜感激。

干杯！

Answer 1

我意识到这是一个老问题。但它会让需要它的人受益。我相信关于将全局数据网格处理到服务器的线程已经很少了。我有同样的要求，必须解决它。

我只在编辑模式下实现它而不使用内联功能。添加/删除功能是通过刷新网格来处理的，而不是在本地保存。

您需要在服务器上实现代码来处理整个数据网格，解析来自客户端的 json 数组数据。在我的例子中，逐行提取行数据并将其映射到服务器上的相应 bean，将值映射到模型对象，以便您可以对每一行执行保存操作。

为了做到这一点，我添加了一个名为“全部保存”的自定义按钮，并向用户发送一条提醒消息，以手动保存他或她修改的每一行，以便正确检索 json 数据网格值并将其发布到服务器.

以下是如何在客户端编写此类函数的示例，对于服务器，您需要编写自己的 RESTful Web 服务来处理保存操作。

var executeGlobalSave = function () {

       var gridData = jQuery(grid_selector).getRowData();
        var postData = JSON.stringify(gridData);
        console.log("JSON serialized jqGrid data:\n" + postData);
        $.ajax({
            type: "PUT",
            url: URLUpdateAll,
            data : {
                jgGridData: postData
            },
            dataType:"json",
            contentType: "application/json; charset=utf-8",
            success: function(response, textStatus, xhr) {
                console.log("success");
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log("error");
            }
        });

};

希望对你有帮助！