使用 jqGrid 的内联编辑和 RESTful url？

Question

我正在使用 jqGrid，并且希望能够使用其内置编辑功能来进行 ajax 调用来添加/编辑/删除。我们的 API 使用 RESTful 动词和 url，如下所示：

verb     url               action
--------------------------------------------------------------
GET      /api/widgets      get all widgets (to populate grid)
POST     /api/widgets      create new widget
PUT      /api/widgets/1    update widget 1
DELETE   /api/widgets/1    delete widget 1

是否可以在这些限制下使用内置的 ajax 处理，或者我是否必须使用本地数据（如概述 此处 & 此处）并自己管理ajax调用？如果可能的话，我应该在网格上设置哪些属性？

（ajaxRowOptions 看起来很有希望，但是文档< /a> 关于如何使用它有点薄弱。）

Answer 1

Add 表单中默认使用 POST。

为 RESTfull 后端定制 jqGrid 的主要思想可以在 旧答案。

如果您使用导航器工具栏的“删除”按钮，则在表单编辑中使用“删除”。请查看此处或此处。因此，您应该使用以下设置：

$("#grid").jqGrid('navGrid', '#pager',
    {edit: false, add: false, search: false}, {}, {},
    { // Delete parameters
        mtype: "DELETE",
        serializeDelData: function () {
            return ""; // don't send and body for the HTTP DELETE
        },
        onclickSubmit: function (params, postdata) {
            params.url = '/api/widgets/' + encodeURIComponent(postdata);
        }
    });

我在上面的示例中使用 encodeURIComponent 函数确保 id 是否有一些特殊字符（例如空格）将被编码，以便服务器部分自动接收原始（解码）数据。您可能需要为向服务器发送删除请求期间使用的 $.ajax 调用设置一些附加设置。您可以使用 ajaxDelOptions 属性。

您可以将上述设置设为默认设置。您可以按照以下方式执行此操作

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

上面示例中的方法 onclickSubmit 可用于编辑操作（在表单编辑的情况下），将 URL 动态修改为 /api/widgets /1。在许多情况下，在上述形式中使用 onclickSubmit 是不可能的，因为需要使用不同的基本 url ('/api/widgets') 和不同的网格。在可以使用的情况下

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

，那么 navGrid 的使用应该明确设置 url

$("#grid").jqGrid('navGrid', '#pager',
    {edit: false, add: false, search: false}, {}, {},
    { // Delete parameters
        url: '/api/widgets'
    });

和
要在内联编辑中使用“PUT”，您可以设置以下默认 jqGrid 设置：

$.extend($.jgrid.defaults, {
    ajaxRowOptions: { contentType: "application/json", type: "PUT", async: true },
    serializeRowData: function (data) {
        var propertyName, propertyValue, dataToSend = {};
        for (propertyName in data) {
            if (data.hasOwnProperty(propertyName)) {
                propertyValue = data[propertyName];
                if ($.isFunction(propertyValue)) {
                    dataToSend[propertyName] = propertyValue();
                } else {
                    dataToSend[propertyName] = propertyValue;
                }
            }
        }
        return JSON.stringify(dataToSend);
    }
});

一般情况下不需要设置 contentType: "application/json"，但某些服务器技术可能需要它。上例中的回调函数 serializeRowData 以 JSON 形式发送数据。 RESTfull 不需要它，但它很常见。函数 JSON.stringify 是在最新的 Web 浏览器中本机实现的，但为了确保它在旧浏览器中工作，您应该包含 json2.js 在您的页面上。

serializeRowData 的代码可能非常简单

serializeRowData: function (data) {
    return JSON.stringify(data);
}

，但我使用上面的代码能够使用方法 editRow （参见 此处< /a> 和问题描述此处）。

editRow 中 RESTfull URL（如 /api/widgets/1）的用法非常简单：

$(this).editRow(rowid, true, null, null, '/api/widgets/' + encodeURIComponent(rowid));

要在表单编辑时使用它，您应该

grid.navGrid('#pager', {},
    { mtype: "PUT", url: '/api/widgets' });

它

$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" }, // can be not required
    onclickSubmit: function (params, postdata) {
        params.url += '/' + encodeURIComponent(postdata.list_id);
    }
});

使用 需要注意的是，要从 onclickSubmit 内部的 postdata 获取 id，需要使用 postdata.list_id 而不是postdata.id，其中'list'是网格的ID。为了能够使用不同的网格（）ID，可以使用new非标准参数。例如，在下面的代码中，我使用 myGridId:

var myEditUrlBase = '/api/widgets';
grid.navGrid('#pager', {},
    { mtype: "PUT", url: myEditUrlBase, myGridId: 'list' },
    { // Add options
        url: myEditUrlBase },
    { // Delete options
        url: myEditUrlBase });

并将默认设置定义为

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

$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" }, // can be not required
    onclickSubmit: function (params, postdata) {
        params.url += '/' + encodeURIComponent(postdata[params.myGridId + '_id']);
    }
});

In case of the use of 格式化程序：'actions' （参见 此处和此处）进行内联或表单编辑（或混合）您可以使用与前面描述的相同的技术，但使用 editOptions 和 delOptions 格式选项转发所有需要的编辑/删除选项。

您的最后一个问题是使用 GET 作为 /api/widgets。经典的 RESTfull 服务将仅返回所有项目的数组作为 /api/widgets 上的响应。因此，您应该只使用 loadonce: true 和 jsonReader ，它们使用方法而不是属性（请参阅此处 和 此处）。

loadonce: true,
jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj; },
    page: function () { return 1; },
    total: function () { return 1; },
    records: function (obj) { return obj.length; }
}

您应该以某种方式包含哪些项目属性可以用作网格行的 id 的信息。该 ID 在页面上必须唯一。如果您的数据没有 id，我建议您将其用作

id: function () { return $.jgrid.randId(); }

附加的 jsonReader 方法，因为默认情况下，当前版本的 jqGrid 使用顺序整数（“1”、“2”、“3”、.. .) 作为行 ID。如果同一页面上至少有两个网格，则会出现问题。

如果“GET”返回的数据大小超过 100 行，我建议您最好使用服务器端分页。这意味着您将在服务器部分添加一个附加方法，该方法支持服务器端数据排序和分页。我建议您阅读答案，其中我描述了原因 输入数据的标准格式不是 RESTfull 项目数组，并且还具有 page、total 和 records。对于经典的 RESTful 设计来说，新方法可能并不陌生，但本机甚至 SQL 代码中的排序和分页数据可以显着提高最终用户的总体性能。如果标准 jqGrid 输入参数的名称（page、rows、sidx 和 sord），您可以使用 < code>prmNames jqGrid 参数在那里重命名。

Answer 2

另请查看这个优秀的通用教程，了解如何为 RESTful URL 设置 jqGrid 这里，其中还包括相应的 Spring MVC 服务器部分的外观。

Answer 3

我设法通过实现 beforeSubmitCell 事件处理程序来实现它：

beforeSubmitCell: function(rowId) {

            jQuery("#grid-HumanResource-table").jqGrid(
                'setGridParam',
                {
                    cellurl: s.getBaseModule().config.baseAPIUrl + "humanResource/" + rowId
                }
            );
        },

我正在使用 jqGrid 4.6 版本。