jquery - 在客户端的 jqGrid 中编辑数据，然后批量发送到服务器？

Question

我正在用初始数据填充 jqGrid。然后我想要完成的是用户应该能够编辑、插入和删除行。用户完成后，他应该单击“保存”按钮，该按钮会将更改的数据发送到服务器以更新数据库。

我已将网格设置为 cellssubmit: "clientArray"，并使用 $("#dagbok_grid").getChangedCells('all') 获取更改的行。似乎有效。当我添加行时，我给它们的 id 为 -1，这样我就知道哪些是新的。

当我尝试使用 jqGrid("delGridRow", rowid) 实现删除时，它似乎总是想发布到服务器。有没有办法在本地进行删除，然后将其与所有其他更改一起发送？

Answer 1

要从网格中删除行，您可以使用 delRowData ，但是 delGridRow 的用法经过一些技巧之后也是可能的。在 the answer我发布了演示，展示了如何实现本地表单编辑。该解决方案的主要思想是使用 processing: true 设置。您可以通过添加附加选项 $("#dagbok_grid").jqGrid("delGridRow", rowid, delSettings) 来删除与 delGridRow 相关的本地数据，其中 delSettings 可以定义如下:

var delSettings = {
        afterShowForm: function ($form) {
            var form = $form.parent()[0], dialog;
            // delete button: "#dData", cancel button: "#eData"
            $("#dData", form).attr("tabindex", "1000");
            $("#eData", form).attr("tabindex", "1001");
            setTimeout(function () {
                // set "Delete" button as default, so one can
                // confirm deliting by pressing "Enter" key
                $("#dData", form).focus();
            }, 50);
            dialog = $form.parent().parent();
            dialog.position({
                my: "center",
                //at: 'center center',
                of: grid.closest('div.ui-jqgrid')
            });
        },
        // because I use "local" data I don't want to send the changes to the server
        // so I use "processing:true" setting and delete the row manually in onclickSubmit
        onclickSubmit: function (options) {
            var gridId = $(options.gbox).attr("id").substr(5),
                gridIdSelector = $.jgrid.jqID(gridId),
                $grid = $("#" + gridIdSelector);
                p = $grid[0].p, // jqGrid parameters
                newPage = p.page,
                rowids = p.multiselect ? p.selarrrow : [p.selrow];

            // reset the value of processing option to true
            // because the value can be changed by jqGrid
            options.processing = true;

            // delete the row
            $.each(rowids, function () {
                $grid.jqGrid('delRowData', this);
            });
            $.jgrid.hideModal("#delmod" + gridIdSelector,
                                { gb: options.gbox,
                                    jqm: options.jqModal,
                                    onClose: options.onClose });

            if (p.lastpage > 1) {// on the multipage grid reload the grid
                if (p.reccount === 0 && newPage === p.lastpage) {
                    // if after deliting there are no rows on the current page
                    // which is the last page of the grid
                    newPage -= 1; // go to the previous page
                }
                // reload grid to make the row from the next page visable.
                $grid.trigger("reloadGrid", [{page: newPage}]);
            }

            return true;
        },
        processing: true
    };

我会警告您有关从服务器获取的数据的批量修改的问题。您可能遇到的问题是并发错误。换句话说，如果两个人编辑相同的信息。用户可以先加载信息，然后再编辑信息，而无需从服务器刷新网格。此时其他用户可以修改部分信息。检测此类错误并不那么容易，但创建良好的错误消息则更加复杂。如果用户必须再次进行所有修改，这会让程序的用户非常生气。请参阅here和 here了解更多信息。