使用jqGrid的RESTful url进行内联编辑？
我正在使用jqGrid，并希望能够使用其内置的编辑function，使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处理这些限制，还是我必须使用本地数据（ 这里 ＆ 这里概述）和自己pipe理ajax调用？ 如果可能的话，我在网格上设置了什么属性？
（ ajaxRowOptions看起来很有前途，但是如何使用它的文档有点薄。）
添加表单中的POST的用法是默认的。
定制jqGrid for RESTfull后端的主要思想是在旧的答案中find。
如果使用导航器工具栏的“删除”button，可以在表单编辑中使用“删除”。 看看这里或这里 。 所以你应该使用下面的设置：
$("#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方法可用于编辑操作（在编辑表单的情况下），以dynamic地将URL修改为/api/widgets/1 。 在许多情况下，以上forms的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"通常不是必需的，但对某些服务器技术可能是必需的。 上面的例子中的callback函数serializeRowData将数据作为JSON发送。 它不是RESTfull所必需的，但是非常常见。 函数JSON.stringify是在最新的Web浏览器中本地实现的，但要确保它在旧浏览器中的工作，您应该在您的页面上包含json2.js 。
serializeRowData的代码可能非常简单
serializeRowData: function (data) { return JSON.stringify(data); }
但是我使用上面的代码能够使用方法editRow的extraparam中的函数 （请参阅这里和这里的问题描述）。
editRow中RESTfull URL（如/api/widgets/1 ）的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); } });
请注意，要从postdata的onclickSubmit获取id ，并且需要使用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']); } });
如果使用格式化程序：使用内联或表单编辑（或混合）的“操作” （请参阅此处和此处 ），则可以使用前面所述的相同技术，但是可以使用editOptions和delOptions formatoptions转发所有需要的编辑/删除选项。
最后一个问题是使用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; } }
您应该以某种方式包含哪些item属性可以用作网格行的id。 该ID在页面上必须是unique的。 你的数据没有ID我build议你使用
id: function () { return $.jgrid.randId(); }
作为附加的jsonReader方法，因为默认情况下，当前版本的jqGrid使用顺序整数（“1”，“2”，“3”，…）作为行ID。 如果在同一页面上至less有两个网格，则会跟随这些问题。
如果'GET'返回的数据大小多于100行，我build议你最好使用服务器端分页。 这意味着您将在支持服务器端sorting和数据分页的服务器部分添加一个额外的方法。 我build议你阅读答案 ，我描述了为什么input数据的标准格式不是RESTfull项目数组，并且还有page ， total和records 。 对于传统的RESTfuldevise，新方法可能并不陌生，但是在本地甚至SQL代码中的sorting和分页数据可以大大提高terminal用户的总体性能。 如果标准jqGridinput参数（ page ， rows ， sidx和sord ）的名称可以使用prmNames jqGrid参数在那里重命名。
另外，请查看这篇关于如何为RESTful URL设置jqGrid的优秀通用教程，其中还包括相应的Spring MVC服务器部分的外观。
我设法通过实现beforeSubmitCell事件处理程序来实现它：
beforeSubmitCell: function(rowId) { jQuery("#grid-HumanResource-table").jqGrid( 'setGridParam', { cellurl: s.getBaseModule().config.baseAPIUrl + "humanResource/" + rowId } ); },
我正在使用jqGrid 4.6版本。
