在自由jqGrid中添加/编辑/删除行

Question

我正在使用免费的jqGrid 4.12.1。我想在网格中添加、编辑和删除行，并希望为每个操作进行服务器端调用。我添加了编辑URL和“操作”格式化程序，如下所示，

 {
  name: "actions",
  width: 100,
  formatter: "actions",
  formatoptions: {
      keys: true,
      editOptions: {},
      addOptions: {},
      delOptions: {}
  }       
  }

我在下面添加“inlineNav”，

$("#itemList").jqGrid('inlineNav',"#itemListPager", 
         {
            edit: true,
            add: true,
            del: true,
            search: true,
            searchtext: "Search",
            addtext: "Add",
            edittext: "Edit",
            deltext: "Delete"
        },
        {  
            closeOnEscape: true, //Closes the popup on pressing escape key
            reloadAfterSubmit: true,
            drag: true,
            url: "${pageContext.request.contextPath}/billing/saveItem",
            errorfunc: function (rowId, resp) {
                alert(resp);
            },
            afterSubmit: function (response, postdata) {
                if (response.responseText == "") {

                    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
                    return [true, '']
                }
                else {
                    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
                    return [false, response.responseText]//Captures and displays the response text on th Edit window
                }
            },
            editData: {
                EmpId: function () {
                    var sel_id = $('#itemList').jqGrid('getGridParam', 'selrow');
                    var value = $('#itemList').jqGrid('getCell', sel_id, '_id');
                    return value;
                }
            }
        },
        {
            closeAfterAdd: true, //Closes the add window after add
            url: "${pageContext.request.contextPath}/billing/saveItem",
            afterSubmit: function (response, postdata) {
                if (response.responseText == "") {

                    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
                    return [true, '']
                }
                else {
                    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
                    return [false, response.responseText]
                }
            }
        },
        {   //DELETE
            closeOnEscape: true,
            closeAfterDelete: true,
            reloadAfterSubmit: true,              
            url: "${pageContext.request.contextPath}/billing/saveItem",
            drag: true,
            afterSubmit: function (response, postdata) {
                if (response.responseText == "") {

                    $("#itemList").trigger("reloadGrid", [{ current: true}]);
                    return [false, response.responseText]
                }
                else {
                    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                    return [true, response.responseText]
                }
            },
            delData: {
                EmpId: function () {
                    var sel_id = $('#itemList').jqGrid('getGridParam', 'selrow');
                    var value = $('#itemList').jqGrid('getCell', sel_id, '_id');
                    return value;
                }
            }
        },
        {//SEARCH
            closeOnEscape: true
        }       
        );

上面添加的“inlineNav”没有任何效果，因为没有在添加新行或删除现有行时进行服务器端调用。只有在编辑的情况下才进行服务器端调用，并且该调用也不会通过上面的“inlineNav”代码进行。因为即使我删除了“inlineNav”代码，服务器端仍会调用“editurl”。那么，如何在添加/编辑/删除行时进行服务器端调用，以及如何向这些调用传递参数呢。如果有人能给我举出一个可行的例子，我将不胜感激。谢谢

更新：-

我已经删除了“actions”格式化程序并修改了代码，如下所示，

<script type="text/javascript">

var dataGrid = $('#itemList');
var firstClick = true;
    $(document).ready(function () {
        $('#action').click(function () {
            if (!firstClick) {
                $("#itemList").setGridParam({datatype:'json'}).trigger("reloadGrid");
            }   
            firstClick = false;
        $("#itemList").jqGrid({
            url: "${pageContext.request.contextPath}/billing/medicines",
            datatype: "json",
            //styleUI : 'Bootstrap',
            mtype: "POST",
            autowidth: true,
            shrinkToFit: true,
            sortname: "Id",
            sortorder: "asc",
            loadBeforeSend: function(jqXHR) {
                 jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
            },
            postData: {
            },
            loadError: function (jqXHR, textStatus, errorThrown) {
                alert('HTTP status code: ' + jqXHR.status + '\n' +
                      'textStatus: ' + textStatus + '\n' +
                      'errorThrown: ' + errorThrown);
                alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText); 
            },
            colNames: ["Id", "Item Type", "Item Code", "Unit", "Stock", "Batch No.", "Expiry Date", "Quantity Per Unit", "Price"],
            colModel: [
                { name: "itemId", width: 35, align: "left", sorttype:"int", search: false},
                { name: "itemType", width: 100, align: "left",  editable: true},
                { name: "itemCode", width: 120, align: "left",  editable: true},
                { name: "unit", width: 70, align: "left", search: false,  editable: true},
                { name: "availableQuantity", width: 55, align: "left", search: false, formatter: "number",  editable: true},
                { name: "batchNumber", width: 80, align: "left", search: false,  editable: true},
                { name: "expiryDate", width: 80, align: "left", search: false, sorttype: "date",  editable: true, formatoptions: {srcformat:'d/m/Y', newformat:'d/m/Y'}},
                { name: "quantityPerUnit", width: 80, align: "left", search: false, formatter: "number",  editable: true},
                { name: "price", width: 55, align: "left", search: false, formatter: "number",  editable: true}
            ],
            pager: "#itemListPager",
            rowNum: 50,
            rowList: [50, 100, 150, 200],
            rownumbers: true,
            rownumWidth: 25,
            sortname: "id",
            sortorder: "desc",
            viewrecords: true,
            height: '100%',
            loadonce: true,
            //gridview: true,
            autoencode: true,
            editurl: "${pageContext.request.contextPath}/billing/saveItem",
            caption: "Item List",
            ondblClickRow: function(rowId){}
        }).navGrid('#itemListPager',{add:false,edit:false,del:true});
        $("#itemList").jqGrid('filterToolbar', {autoSearch: true, stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
        $("#itemList").jqGrid('gridResize', { minWidth: 450, minHeight: 150 });

        var saveparameters = {
                "successfunc" : null,
                "url" : "${pageContext.request.contextPath}/billing/saveItem",
                    "extraparam" : {},
                "aftersavefunc" : null,
                "errorfunc": null,
                "afterrestorefunc" : null,
                "restoreAfterError" : true,
                "mtype" : "POST"
            };

        var editparameters = {
                "keys" : false,
                "oneditfunc" : null,
                "successfunc" : null,
                "url" : "${pageContext.request.contextPath}/billing/editItem",
                    "extraparam" : {},
                "aftersavefunc" : null,
                "errorfunc": null,
                "afterrestorefunc" : null,
                "restoreAfterError" : true,
                "mtype" : "POST"
            };

        var parameters = { 
                   edit: true,
                   editicon: "ui-icon-pencil",
                   add: true,
                   addicon:"ui-icon-plus",
                   save: true,
                   saveicon:"ui-icon-disk",
                   cancel: true,
                   cancelicon:"ui-icon-cancel",
                   addParams : saveparameters,
                   editParams : editparameters
                };
        $("#itemList").jqGrid('inlineNav',"#itemListPager", parameters);

    });
});
</script> 

json数据示例如下：，

[
{"itemDetailId":1,"itemId":1,"itemType":"Medicine","itemCode":"Aler-Dryl","itemDesc":"Aler-Dryl","batchNumber":"batch1","expiryDate":"18/02/2017","unit":"tablet","subUnit":"tablet","availableQuantity":120.0,"quantityPerUnit":60.0,"price":122.0},
{"itemDetailId":2,"itemId":2,"itemType":"Medicine","itemCode":"Benadryl","itemDesc":"Benadryl","batchNumber":"batch1","expiryDate":"18/02/2017","unit":"ml","subUnit":"ml","availableQuantity":60.0,"quantityPerUnit":120.0,"price":90.0}
]

现在，分别在编辑和添加行时调用editparameters和saveparameters中指定的url。请建议上述方法是否有效。此外，在将编辑或保存数据发布到服务器之前，我们如何设置请求标头。而且我找不到类似于editparameters和saveparameters的deleteparameters，因此我可以使用delete特定参数。

更新2：-

我可以使用以下代码在添加/编辑行上调用服务器端代码之前成功设置请求头，

 $.ajaxSetup({
            beforeSend: function (jqXHR, settings) {                     
               jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
          }});

更新3：-
按照Oleg的建议清理代码，如下所示。但在严格模式下，我现在收到JS错误-“Uncatch Re0014 ceError： save参数未定义”

<script type="text/javascript">
$(document).ready(function () {
    "use strict";
    var dataGrid = $('#itemList');
    var firstClick = true;
    $('#action').click(function () {
        if (!firstClick) {
            $("#itemList").setGridParam({datatype:'json'}).trigger("reloadGrid");
        }   
        firstClick = false;
    $("#itemList").jqGrid({
        url: "${pageContext.request.contextPath}/billing/medicines",
        datatype: "json",
        mtype: "POST",
        autowidth: true,
        loadBeforeSend: function(jqXHR) {
             jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
        },
        colNames: ["Id", "Item Type", "Item Code", "Unit", "Stock", "Batch No.", "Expiry Date", "Quantity Per Unit", "Price"],
        colModel: [
            { name: "itemId", width: 35, align: "left", sorttype:"int", search: false, editable: false, key: true},
            { name: "itemType", width: 100, align: "left"},
            { name: "itemCode", width: 120, align: "left"},
            { name: "unit", width: 70, align: "left", search: false},
            { name: "availableQuantity", width: 55, align: "left", search: false, formatter: "number",},
            { name: "batchNumber", width: 80, align: "left", search: false},
            { name: "expiryDate", width: 80, align: "left", search: false, sorttype: "date", formatoptions: {srcformat:'d/m/Y', newformat:'d/m/Y'}},
            { name: "quantityPerUnit", width: 80, align: "left", search: false, formatter: "number"},
            { name: "price", width: 55, align: "left", search: false, formatter: "number"}
        ],
        cmTemplate: {editable: true},
        pager: true,
        rowNum: 50,
        rowList: [50, 100, 150, 200],
        rownumbers: true,
        rownumWidth: 25,
        sortname: "itemType",
        sortorder: "asc",
        forceClientSorting: true,
        viewrecords: true,
        height: '100%',
        loadonce: true,
        //gridview: true,
        autoencode: true,
        editurl: "${pageContext.request.contextPath}/billing/saveItem",
        caption: "Item List"
        //ajaxRowOptions: { beforeSend: myTokenSetting }, loadBeforeSend: myTokenSetting where var myTokenSetting = function(jqXHR) { jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val()); }
    }).navGrid({add:false,edit:false,del:true});
    $("#itemList").jqGrid('filterToolbar', {autoSearch: true, stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
    $("#itemList").jqGrid('gridResize', { minWidth: 450, minHeight: 150 });

    var saveparameters = {
            "successfunc" : null,
            "url" : "${pageContext.request.contextPath}/billing/saveItem",
             "extraparam" : {},
            "aftersavefunc" : null,
            "errorfunc": null,
            "afterrestorefunc" : null,
            "restoreAfterError" : true,
            "mtype" : "POST"
        };

    var editparameters = {
            "keys" : false,
            "oneditfunc" : null,
            "successfunc" : null,
            "url" : "${pageContext.request.contextPath}/billing/editItem",
             "extraparam" : {},
            "aftersavefunc" : null,
            "errorfunc": null,
            "afterrestorefunc" : null,
            "restoreAfterError" : true,
            "mtype" : "POST"
        };

    var parameters = { 
               edit: true,
               editicon: "ui-icon-pencil",
               add: true,
               addicon:"ui-icon-plus",
               save: true,
               saveicon:"ui-icon-disk",
               cancel: true,
               cancelicon:"ui-icon-cancel",
               addParams : saveparameters,
               editParams : editparameters
            };
    $("#itemList").jqGrid('inlineNav',parameters);

    $.ajaxSetup({
        beforeSend: function (jqXHR, settings) {
           alert('Before Row Send');         
           jqXHR.setRequestHeader("X-CSRF-TOKEN", $("input[name='_csrf']").val());
      }});

    });
});
</script>

Answer 1

您应该检查inlineNav的选项以发现您使用了绝对错误的选项：

jQuery("#grid_id").jqGrid('inlineNav', pagerid, parameters);

其中参数的形式为

{ 
    edit: true,
    editicon: "ui-icon-pencil",
    add: true,
    addicon: "ui-icon-plus",
    save: true,
    saveicon: "ui-icon-disk",
    cancel: true,
    cancelicon: "ui-icon-cancel",
    addParams: {useFormatter : false},
    editParams: {}
}

您使用另一种方法的选项navGrid

jQuery("#grid_id").jqGrid('navGrid', '#gridpager', {parameters},
    prmEdit, prmAdd, prmDel, prmSearch, prmView);

允许使用表单编辑。

您写道，您希望同时使用格式化程序：“操作”和InlineAV。因此，您必须提供一些内联编辑选项两次。我建议你阅读[维基文章](https://github.com/free-jqgrid/jqGrid/wiki/New-style-of-usage-options-of-internal-methods). 它描述了使用formatter进行表单编辑时出现的问题：“actions”（操作）和navGrid（导航网格）。内联编辑的使用有着非常密切的问题。您必须提供InlineAV的属性和格式化程序的相应选项：“操作”`（请参见此处）。为了使代码更加可读和简单，免费jqGrid提供了另一种形式的编辑选项。

您可以在jqGrid的inlineEdting选项中指定所有内联编辑选项，在navOptions或inlineNavOptions中指定inlineNav方法（如果需要）的附加特定选项，在formDelting中的Delete操作选项等。此外，reloadGrid具有选项fromServer： true以恢复您使用的datatype（"json"，"jsonp"，"xml"，...）的原始值。您可以使用reloadGridOptions：{fromServer： true}表单编辑选项或formDelting强制从服务器重新加载。

此外，您现有的代码包含许多非常可疑的部分，包括_id和empId。我强烈建议您包含用于填充网格的输入JSON数据格式的示例。如果您想使用empId作为rowid的名称，为什么要使用_id？代码片段像

EmpId: function () {
    var sel_id = $('#itemList').jqGrid('getGridParam', 'selrow');
    var value = $('#itemList').jqGrid('getCell', sel_id, '_id');
    return value;
}

显示当前rowid似乎是错误的，并且_id列包含您作为rowid需要的正确信息，名称为empId。

例如，您可以使用prmNames：{id："79Id"}并将key： true添加到列_id中。属性key： true在列_id中将通知jqGrid使用列_id中的值作为rowid，并且prmNames：{id："79Id"}将在Edit and Delete中使用的默认id属性重命名为URId。因此，在删除和编辑操作期间，jqGrid将自动向服务器发送EPId参数以及_id列中的值。

也许您也可以从网格中删除不需要的列id（至少如果您隐藏该列），但我需要查看jqGrid的输入数据，告诉您可以使用的jqGrid的确切选项。

我确信您可以使用免费的jqGrid选项从本质上减少现有代码并使其更具可读性，但您必须仔细检查现有代码。我建议您首先使用正确的rowid，并消除所有使用的隐藏列。Free jqGrid提供了与colModel结构非常接近的附加属性（additionalProperties）功能，但输入数据的相应属性将仅保存在本地数据中，而不会放置在表的DOM中。如果您发布现有的、jsonReader和从服务器返回的JSON响应示例（1-2行数据和伪数据就足够了），我可以解释得更清楚。