ajax - 使用RESTful URL进行jqGrid的内联编辑？

Question

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

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处理，还是我必须使用本地数据（如here和here所述）并自己管理ajax调用？如果可能，我应该在网格上设置哪些属性？

（ajaxRowOptions看起来很有前途，但是documentation在使用方法上有点薄。）

Answer 1

默认情况下，“添加”表单中的POST用法是默认的。

您可以在the old answer中找到为RESTfull后端定制jqGrid的主要思想。

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

$("#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会被编码，以便id包含一些特殊字符（例如空格），以便服务器部分自动接收原始（解码）数据。可能您需要为将Delete请求发送到服务器期间使用的$.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的extraparam内部的函数（请参见here和问题描述here）。

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

$(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);
    }
});

重要的是要注意，要从id内部的postdata中获取onclickSubmit，并且需要使用postdata.list_id而不是postdata.id，其中'list'是网格的ID。为了能够使用不同的网格（<table>）id，可以使用新的非标准参数。例如，在下面的代码中，我使用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']);
    }
});

如果在内联或表单编辑（或混合使用）中使用formatter:'actions'（请参见here和here），则可以使用与前面所述相同的技术，但是可以使用和editOptions格式选项。

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

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在页面上必须为jsonReader。如果您的数据没有ID，我建议您使用

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

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

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