在免费的jqGrid中添加/编辑/删除一行

时间:2016-02-20 07:40:15

标签: javascript jquery jqgrid free-jqgrid

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

 {
  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 dada是,

[
{"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,以便我可以使用删除特定的参数。

更新2: -

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

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

更新3: -
根据Oleg的建议清理代码,如下所示。但在严格模式下,我现在得到JS错误 - “未捕获的ReferenceError:未定义saveparameters”

<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>

1 个答案:

答案 0 :(得分:3)

您应该检查inlineNav的选项,以找出您使用绝对错误的选项:

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

其中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);

允许使用form editing

您写道,您希望使用 formater: "actions" inlineNav . Thus you would have to provide some options of inline editing twice. I would recommend you to read [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/New-style-of-usage-options-of-internal-methods). It describes the problems with the usage of form editing using格式化程序:&#34;操作&#34; and navGrid together. The usage of inline editing have very close problems. You will have to provide addParams and editParams properties of inlineNav and the corresponding options of formatter:&#34; actions&#34;`(参见here)。为了使代码更具可读性和简单性,jqGrid提供了另一种编辑选项。

您可以在 jqGrid inlineEditing选项中指定所有内联编辑选项,在inlineNav或其中navOptions方法的其他特定选项(如果需要) inlineNavOptionsformDeleting中删除操作的选项,等等。此外,reloadGrid可以选择fromServer: true来恢复datatype"json""jsonp""xml",...)的原始值用过的。您可以使用表单编辑的reloadGridOptions: { fromServer: true }选项或formDeleting强制从服务器重新加载。

此外,您现有的代码包含许多包含_idEmpId的非常可疑的部分。我强烈建议您包含输入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列包含正确的信息,您需要将其作为名称EmpId下的rowid。

您可以使用prmNames: { id: "EmpId"}并将key: true添加到列_id。列key: true中的属性_id将通知jqGrid使用列_id中的值作为rowid,prmNames: { id: "EmpId"}将重命名默认的id属性编辑并删除到EmpId。因此,jqGrid将自动发送EmpId参数,并在删除和编辑操作期间将_id列中的值发送到服务器。

也可以从网格中删除不需要的列_id(至少如果你隐藏了列),但我需要查看jqGrid的输入数据来说明确切的选项您可以使用的jqGrid。

我确信您可以使用免费的jqGrid选项从根本上减少现有代码并使其更具可读性,但您必须仔细检查现有代码。我建议你从使用正确的rowid开始,并删除你使用的所有隐藏列。自由jqGrid提供additionalProperties功能,其结构非常接近colModel的结构,但输入数据的相应属性将仅保存在本地数据中,而不是放在表的DOM中。如果您发布现有的colModeljsonReader以及从服务器返回的JSON响应示例(带有虚拟数据的1-2行数据就足够了),我可以更清楚地解释。