在单页 MVC 中删除多个 jqGrid

Question

我在一个视图中有两个 jqGrid。我加载这些网格没有问题，但是当我试图从 grid1 中删除记录时，它正在发布到 grid2 删除方法中设置的 URL。

我使用下面的代码来删除两个 jqGrids 中的行。

$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    },
    onclickSubmit: function (params, postdata) {
        params.url = 'url' + postdata;
    },
    afterComplete: function (response, postdata, formid) {
    }
});

我写了两个单独的方法来从各自的网格中删除，这两个方法都和上面一样。

请告诉我如何在两个 jqgrids 上执行删除操作。

我认为在 grid1 中删除行的扩展方法被 grid2 扩展方法过载。

Answer 1

$.jgrid.del 定义了页面上所有 jqGrids 使用的 defaults。 $.extend 只是将参数的属性（mtype、serializeDelData、onclickSubmit 和afterComplete）与$.jgrid.del 中可能存在的同名属性组合在一起。因此 jqGrid 使用对象$.jgrid.del 不是在创建网格期间，而是在执行删除操作期间然后代码就像

$.extend($.jgrid.del, {...}); // first settings
$("#grid1").jqGrid({
    ...
}).jqGrid("navGrid");
$.extend($.jgrid.del, {...}); // the second settings
$("#grid2").jqGrid({
    ...
}).jqGrid("navGrid");

将只使用$.jgrid.del 的第二个设置。

因此您应该使用$.extend($.jgrid.del, {...});在页面上设置common默认值并单独设置其他参数：

$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    }
});
$("#grid1").jqGrid({
    ...
}).jqGrid("navGrid", ....., { /*Del options*/
    onclickSubmit: function (params, postdata) {
        params.url = 'url1' + postdata;
    }
});
$("#grid2").jqGrid({
    ...
}).jqGrid("navGrid", ....., { /*Del options*/
    onclickSubmit: function (params, postdata) {
        params.url = 'url2' + postdata;
    }
});

如果你使用我开发的free jqGrid fork，那么你可以在jqGrid的formDeleting选项中指定Delete参数。此外，免费的 jqGrid 支持 functions 作为 url 的值（更多详细信息请参阅 the answer），您可以将上述代码重写如下

$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    }
});
$("#grid1").jqGrid({
    ...
    formDeleting: {
        url: function (rowid) {
            return "url1/" + rowid;
        }
    }
}).jqGrid("navGrid");
$("#grid2").jqGrid({
    ...
    formDeleting: {
        url: function (rowid) {
            return "url2/" + rowid;
        }
    }
}).jqGrid("navGrid");

当然，如果您将 editurl 设置为每个网格中的基本 URL，那么您可以从 url 函数访问它并重写代码如下

$.extend($.jgrid.del, {
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // don't send and body for the HTTP DELETE
    },
    url: function (rowid, postData, options) {
        return options.url + rowid;
    }
});
$("#grid1").jqGrid({
    ...
    editurl: "url1/"
}).jqGrid("navGrid");
$("#grid2").jqGrid({
    ...
    editurl: "url2/"
}).jqGrid("navGrid");