强制 jqGrid 使用 JSON 进行创建/删除/更新

Question

我开始使用 jqGrid 来显示/添加/编辑/删除一些来自使用 JSON 的 REST 服务的数据。读取数据工作正常，但是其他操作（例如添加、删除）会导致服务器错误，因为我正在使用查询字符串执行参数 POST，但服务器需要 JSON 内容：

$(document)
.ready(
        function() {
            $("#list")
                    .jqGrid(
                            {
                                url : 'http://localhost:8888/rest/service',
                                datatype : 'json',
                                mtype : 'GET',
                                colNames : [ 'name', 'city',
                                        'country'],
                                colModel : [ {
                                    name : 'name',
                                    index : 'name',
                                    width : 150,
                                    editable : true
                                }, {
                                    name : 'city',
                                    index : 'city',
                                    width : 150,
                                    editable : true
                                }, {
                                    name : 'country',
                                    index : 'country',
                                    width : 200,
                                    editable : true
                                } ],
                                pager : '#pager',
                                rowNum : 10,
                                rowList : [ 10, 20, 30 ],
                                sortname : 'invid',
                                sortorder : 'desc',
                                viewrecords : true,
                                gridview : true,
                                caption : 'Data Report',
                                jsonReader : {
                                    repeatitems : false,
                                },
                                editurl : "http://localhost:8888/rest/service/operate",
                                datatype : 'json'
                            });
            jQuery("#list").jqGrid('navGrid', '#pager', {
                edit : false,
                add : true,
                del : true,
                search : true
            });
        });

在另一个线程中，我发现使用以下函数强制所有操作的 JSON 内容的建议，但我已经检查它仅适用于“添加”操作 - 如果您尝试编辑/删除它不起作用网格中的一行（仍然发送查询字符串而不是 JSON 内容）

jQuery.extend(
        jQuery.jgrid.edit, {
            ajaxEditOptions: { contentType: "application/json" },
            recreateForm: true,
            serializeEditData: function(postData) {
                return JSON.stringify(postData);
            },
            afterSubmit: function (response, postdata) {
                var res = jQuery.parseJSON(response.responseText);
                return [true, "", res.d];
            }
        }
    );

有没有更简单的方法来解决我的网格定义中的问题？ 谢谢！

更新： 我已经按照@lucasdc 的建议更新了代码，但是现在错误是“未设置 URL”。似乎我指出的 URL 没有包含在我的网格中。下面是代码：

$(document)
.ready(
        function() {
            $("#list")
                    .jqGrid(
                            {
                                url : 'http://localhost:8888/rest/service',
                                datatype : 'json',
                                mtype : 'GET',
                                colNames : [ 'name', 'surname',
                                        'address'],
                                colModel : [ {
                                    name : 'name',
                                    index : 'name',
                                    width : 150,
                                    editable : true
                                }, {
                                    name : 'surname',
                                    index : 'surname',
                                    width : 150,
                                    editable : true
                                }, {
                                    name : 'address',
                                    index : 'address',
                                    width : 200,
                                    editable : true
                                } ],
                                pager : '#pager',
                                rowNum : 10,
                                rowList : [ 10, 20, 30 ],
                                sortname : 'invid',
                                sortorder : 'desc',
                                viewrecords : true,
                                gridview : true,
                                caption : 'Data Report',
                                jsonReader : {
                                    repeatitems : false,
                                } 

                            });


            jQuery("#list").jqGrid('navGrid', '#pager', {
                edit : true,
                add : true,
                del : true,
                search : true
            });


     $("#list").jqGrid(


     //edit options
{
    url:"http://localhost:8888/rest/service/operate",
    closeAfterEdit:true,
    reloadAfterSubmit:true, 
    onclickSubmit: function(params, postdata) {
        return JSON.stringify(postData);
    },
    afterSubmit: function(response, postData) {
        var res = jQuery.parseJSON(response.responseText);
        return [true, "", res.d];   
    }
},
//add options
{
    url:"http://localhost:8888/rest/service/operate",
    closeAfterAdd:true,reloadAfterSubmit:true, 
    onclickSubmit: function(params, postdata) {
        return JSON.stringify(postData);
    },
    afterSubmit: function(response, postData) {
        var res = jQuery.parseJSON(response.responseText);
        return [true, "", res.d];       
    }
},
//del options
{
    url:'http://localhost:8888/rest/service/operate',
    onclickSubmit: function(url, postdata){
        return JSON.stringify(postData);
    },
    afterSubmit: function(response, postData) {
        var res = jQuery.parseJSON(response.responseText);
        return [true, "", res.d];       
    }
},
{}, //search options
{} //refresh options




 );         

        });


</script>
</head>
<body>
    <table id="list">
        <tr>
            <td />
        </tr>
    </table>
    <div id="pager"></div>
</body>

Answer 1

如果我明白了，您希望在网格中发送有关编辑/添加/删除操作的 JSON 数据。如果这是您的目标，您可以在onclickSubmit 上为每个操作执行此操作。首先，您必须启用这些操作：

$("#list").jqGrid('navGrid', '#pager', {edit:true,add:true,del:true,search:false,refresh:false}, // enable
// Now we set the options for each of the operations:
// Edit options
{
    url:"YOUR_EDIT_URL",
    closeAfterEdit:true,
    reloadAfterSubmit:true, 
    onclickSubmit: function(params, postdata) {
        return JSON.stringify(postData);
    },
    afterSubmit: function(response, postData) {
        var res = jQuery.parseJSON(response.responseText);
        return [true, "", res.d];   
    }
},
// Add options
{
    url:"YOUR_ADD_URL",
    closeAfterAdd:true,reloadAfterSubmit:true, 
    onclickSubmit: function(params, postdata) {
        return JSON.stringify(postData);
    },
    afterSubmit: function(response, postData) {
        var res = jQuery.parseJSON(response.responseText);
        return [true, "", res.d];       
    }
},
// Del options
{
    url:'YOUR_DEL_URL',
    onclickSubmit: function(url, postdata){
        return JSON.stringify(postData);
    },
    afterSubmit: function(response, postData) {
        var res = jQuery.parseJSON(response.responseText);
        return [true, "", res.d];       
    }
},
{}, // Search options
{}  // Refresh options