使用jqGrid的的直列编辑REST风格的网址吗？ [英] Using jqGrid's inline-editing with RESTful urls?

问题描述

我使用jqGrid的，并希望能够使用其内置的编辑功能，使Ajax调用添加/编辑/删除。我们的API使用REST风格的动词和URL像这样：

I'm using jqGrid and would like to be able to use its built-in editing functions to make ajax calls to add/edit/delete. Our API uses RESTful verbs and urls like so:

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调用自己？如果可能的话，做什么样的属性我在网格设置？

Is it possible to use the built-in ajax handling with these restrictions, or do I have to use local data (as outlined here & here) and manage the ajax calls myself? If it is possible, what properties do I set on the grid?

（ ajaxRowOptions 看起来很有希望，但是的文档是如何使用它显得有些单薄。）

(ajaxRowOptions looks promising, but the documentation is a bit thin on how to use it.)

推荐答案

POST 的添加形式的使用是在默认情况下。

The usage of POST in Add form is by default.

您可以在<一个发现的主要想法定制jqGrid的为REST风格的后台href="http://stackoverflow.com/questions/2675625/setting-the-content-type-of-requests-performed-by-jquery-jqgrid/2678731#2678731">the旧的答案。

要使用删除的形式编辑，如果你使用的浏览器工具栏上的删除按钮。看<一href="http://stackoverflow.com/questions/7135173/implementing-delete-and-edit-operations-in-jqgrid/7140029#7140029">here或<一href="http://stackoverflow.com/questions/3952888/custom-delete-function-in-jqgrid/3953153#3953153">here.所以，你应该使用有关以下设置：

To use 'DELETE' in form editing if you use the Delete button of the navigator toolbar. Look at here or here. So you should use about the following settings:

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

我使用 EN codeURIComponent 功能上面的例子中，以确保如果ID将有一些特殊的字符（空格例如）如果将连接$ C $光盘，以便该服务器部分自动接收原始（德codeD）的数据。也许你需要设置一些额外的设置 $。阿贾克斯呼叫发送删除请求到服务器的过程中使用。您可以使用它<一个href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3aform_editing#properties2">ajaxDelOptions属性。

I use in the example above the encodeURIComponent function to be sure that if the id will have some special characters (spaces for example) if will be encoded so that the server part automatically received the original (decoded) data. Probably you will need to set some additional settings for the $.ajax call used during sending Delete request to the server. You can use for it ajaxDelOptions property.

您可以为默认设置上面的设置。您可以就下列事项做到这一点

You can make the above settings as your default settings. You can do this with respect of the following

$.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 /部件/ 1 。在许多情况下， onclickSubmit 在上述形式的使用是不可能的，因为一个需要使用不同的基本URL（/ API /部件）不同的网格。在这种情况下可以使用

The method onclickSubmit from the example above can be used for the Edit operations (in case of form editing) to modify the URL dynamically to /api/widgets/1. In many cases the usage of onclickSubmit in the above form is not possible because one need to use different base urls ('/api/widgets') different grids. In the case one can use

$.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 的使用应符合明确设置网​​址

Then the usage of navGrid should be with explicit setting of url

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

和 要使用'把'内联编辑，您可以设置以下默认jqGrid的设置：

and To use 'PUT' in inline editing you can set the following default jqGrid settings:

$.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：应用/ JSON的不需要一般，但它可能需要一些服务器技术。回调函数 serializeRowData 从上面的例子中发送的数据为JSON。它不需要REST风格，但它是非常普遍的。函数 JSON.stringify 是原生提供最新的Web浏览器中实现，但可以肯定，它在旧的浏览器工作，你应该包括的json2.js 您的网页上。

The setting contentType: "application/json" is not required in general, but it could be required for some server technologies. The callback function serializeRowData from the example above sent the data as JSON. It is not required for RESTfull, but it's very common. The function JSON.stringify is native implemented in the most recent web browsers, but to be sure that it work in old browsers to you should include json2.js on your page.

serializeRowData 的code可以很简单，比如

The code of serializeRowData could be very simple like

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

但我用上面的code，以便能够使用 extraparam 的方法的 editRow （见<一href="http://stackoverflow.com/questions/2928371/how-to-filter-the-jqgrid-data-not-using-the-built-in-search-filter-box/2928819#2928819">here和问题说明<一href="http://stackoverflow.com/questions/5810885/postdata-not-passing-any-parameters/5811359#5811359">here).

but I use above code to be able to use functions inside of the extraparam of the method editRow (see here and the problem description here).

在REST风格URL的使用（如 / API /部件/ 1 ）的 editRow 很简单

The usage of the RESTfull URL (like /api/widgets/1) in the editRow is very simple:

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

要使用它，以防形式的编辑，你应该使用

To use it in case of the form editing you should use

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 ，其中名单是网格的ID。为了能够使用不同的网格（＆LT;表＆gt; ）的IDS可以使用的新的非标准参数。例如，在code下面我用 myGridId ：

It is important to remark that to get id from the postdata inside of onclickSubmit and need use postdata.list_id instead of postdata.id, where 'list' is the id of the grid. To be able to use different grid (<table>) ids one can use new non-standard parameter. For example, in the code below I use 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']);
    }
});

在情况下使用<的href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3a$p$pdefined_formatter#$p$pdefined_format_types">formatter:'actions' （见<一href="http://stackoverflow.com/questions/5196387/jqgrid-editactioniconscolumn-events/5204793#5204793">here和<一href="http://stackoverflow.com/questions/6622779/custom-jqgrid-post-action/6627201#6627201">here)有行内或形式编辑（或组合），可以使用如前面所述相同的技术，但将所有需要编辑/使用删除选项 editOptions 和 delOptions formatoptions。

In case of the usage of formatter:'actions' (see here and here) with inline or form editing (or a mix) you can use the same technique as described before, but forward all needed Edit/Delete option using editOptions and delOptions formatoptions.

最后你的问题是 GET 的用法 / API /部件。将只返回数组中的所有项目作为 / API /部件响应的经典REST风格的服务。所以，你应该只使用 loadonce：真正的和 jsonReader 其使用的方法，而不是属性（请参阅<一个href="http://stackoverflow.com/questions/2835957/jquery-with-asp-net-mvc-calling-ajax-enabled-web-service/2836817#2836817">here和<一href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3aretrieving_data#jsonreader_as_function">here).

The last your question was the usage of GET as /api/widgets. The classical RESTfull services will returns just array of all items as the response on /api/widgets. So you should just use loadonce: true and jsonReader which used methods instead of properties (See here and 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必须是唯一在页面上。它的数据没有身份证，我会建议你使用

You should in some way include information which item property can be used as the id of grid rows. The id must be unique on the page. It your data has no id I would recommend you to use

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

作为一个额外的 jsonReader 的方法，因为每个默认jqGrid的当前版本的使用顺序排列的整数（1，2，3，...）作为行ID。万一具有在同一页上的至少两个网格它将跟随到的问题。

as an additional jsonReader method because per default the current version of jqGrid use sequential integers ("1", "2", "3", ...) as the row ids. In case of having at least two grids on the same page it will follow to the problems.

如果返回的数据的大小GET更是100行，我给你推荐最好使用服务器端分页。这意味着你将添加的其他的方法在服务器部分支持服务器端排序和数据呼叫。我建议您阅读 ，我描述的为什么输入数据的标准格式是不是项目REST风格阵列，具有页，总和记录附加。这种新方法将可能不会陌生了REST风格的经典设计，但在的本机的甚至是SQL code中的排序和分页的数据可以从提高终端用户的侧面显着的总性能。如果标准jqGrid的输入参数的名称（页，行， SIDX 和 SORD ），您可以使用 prmNames jqGrid的参数来重命名存在。

If the size of the data returned by 'GET' are more as 100 rows I would you recommend better to use server side paging. It means that you will add an additional method in the server part which support server side sorting and paging of data. I recommend you to read the answer where I described why the standard format of the input data are not RESTfull array of items and has page, total and records additionally. The new method will be probably not strange for the classical RESTful design, but the sorting and paging data in native or even SQL code can improve the total performance from the side of enduser dramatically. If the names of the standard jqGrid input parameters (page, rows, sidx and sord) you can use prmNames jqGrid parameter to rename there.

这篇关于使用jqGrid的的直列编辑REST风格的网址吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！