Добавить/отредактировать/удалить строку в свободном jqGrid

Question

Я использую бесплатный jqGrid 4.12.1. Я хочу добавлять, редактировать и удалять строки в сетке и желать совершать вызовы на стороне сервера для каждой операции. Я добавил editurl и форматировщик «Действия», как показано ниже,

{ 
    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». Итак, как я могу совершать вызовы на стороне сервера при добавлении/редактировании/удалении строк, а также передавать параметры этим вызовам. Я буду очень признателен, если кто-нибудь может указать мне на рабочий пример. Благодаря

UPDATE: -

Я извлекал форматировщик 'Действия' и изменить код, чтобы выглядеть, как показано ниже,

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

Теперь url, указанный в editparameters и saveparameters, вызывается при редактировании и добавлении строки соответственно. Пожалуйста, предложите, если выше подход является хорошим. Также как мы можем установить заголовок запроса перед редактированием или сохранением данных, отправленных на сервер. И я не могу найти ничего похожего на методы удаления, аналогичные параметрам editparameters и saveparameters, чтобы я мог использовать специальные параметры удаления.

UPDATE 2: -

Я мог успешно установить заголовок запроса, прежде чем на стороне сервера код вызывается на добавления/редактирования строки, используя следующий код,

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

UPDATE 3: -
Убрано кода согласно предложениям Олега, как показано ниже. Но в строгом режиме я получаю ошибку 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> 

Answer 1

Вы должны изучить варианты 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 Formatter: "действия" and navGrid together. The usage of inline editing have very close problems. You will have to provide addParams and editParams properties ofand the corresponding options of inlineNav Formatter: "действия" `(см here). Чтобы сделать код более читабельным и простым, бесплатный jqGrid предоставляет другую форму для редактирования.

Вы можете указать все встроенные функции редактирования внутри из inlineEditingварианта jqGrid дополнительные конкретные варианты inlineNav методы (при необходимости) в navOptions или в inlineNavOptions, варианты операции Удалить в formDeleting и так далее. Кроме того, у reloadGrid есть опция fromServer: true для восстановления первоначального значения datatype ("json", "jsonp", "xml", ...) которое вы использовали. Вы можете использовать reloadGridOptions: { fromServer: true } вариант редактирования формы или formDeleting для принудительной перезагрузки с сервера.

Кроме того, ваш существующий код содержит много очень подозрительных частей с _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: "EmpId"} и добавить key: true в колонку _id. Свойство key: true в столбце _id сообщит jqGrid использовать значение из столбца _id, поскольку rowid и prmNames: { id: "EmpId"} переименуют значение по умолчанию id, которое используется в Edit и Delete to EmpId. Таким образом, jqGrid автоматически установит . Отправьте EmpId параметр со значением от _id в процессе удаления и редактирования на сервер.

Возможно, вы можете удалить ненужные колонки _id из сетки тоже (по крайней мере, если вы держите столбец скрытый), но мне нужно, чтобы увидеть входные данные из jqGrid сказать вам точные варианты jqGrid, которые вы можете использовать.

Я уверен, что вы можете существенно сократить существующий код и сделать его более читаемым, используя бесплатные параметры jqGrid, но вы должны тщательно изучить существующий код. Я предлагаю вам начать с использования правильной строки и устранения всех скрытых столбцов, которые вы используете. Free jqGrid предоставляет функцию additionalProperties, структура которой очень близка к структуре colModel, но соответствующие свойства входных данных будут сохраняться только в локальных данных и не помещаться в DOM таблицы. Я могу объяснить все более ясным, если вы разместите свои существующие colModel, jsonReader и пример ответа JSON, возвращенного с сервера (достаточно 1-2 строк данных с фиктивными данными).