如何在免费的jqgrid中编辑表格后设置行ID值

表的主键有3列（Grupp，Kuu，Toode），服务器返回从这些列创建的Id。如何在免费的jqgrid中编辑表格后设置行ID值

在表单编辑中更改主键列后，服务器发回新的行id。

免费jqgrid不会将此行ID设置为已更改的行ID。服务器返回新的ID。

我尝试用

function EditAddForm_AfterSubmit(response, postdata) { 
    var json = $.parseJSON(response.responseText); 
    return [true, '', json.Id]; 
    }

更改在下面的代码editfor afterSubmit方法ID，但老ID仍传送到服务器，如果行再次编辑。

重现步骤：

打开页面下方的镀铬
选择行通过点击它
使用工具栏的编辑按钮打开表格编辑器
变化领域KUU值
新闻提交按钮。在jqgrid的Kuu栏中更改值请求
双击行开始行编辑
按回车。来自服务器申请的错误消息，因为错误（旧）主键被传递给服务器。

代码：

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <base href="http://example.com/" /> 
     <link rel="stylesheet" href="http://example.com/themes/redmond/jquery-ui.css" type="text/css" /> 
     <link rel="stylesheet" 
       href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
     <link href="http://example.com/Content/Css/normalize.css" rel="stylesheet"/> 
    <link href="http://example.com/Scripts/jqgrid-4.8.0/css/ui.jqgrid.css" rel="stylesheet"/> 


    <title> 
Old primary key value is passed if primary key is changed 
    </title> 
    <script type="text/javascript"> 
     "use strict"; 
     var BASE_URL = 'http://example.com/', 
      Message = { 
       selectRows: "Select", 
       sendingQuery: "Send" 
       }; 
    </script> 

<script src="http://example.com/Scripts/jquery-1.11.2.js"></script> 
<script src="http://example.com/Scripts/jquery-ui-1.11.4.js"></script> 
<script src="http://example.com/Scripts/jqgrid-4.8.0/js/jquery.jqgrid.src.js"></script> 
<script src="http://example.com/Scripts/json2.js"></script> 
<script src="http://example.com/Scripts/erp.js"></script> 
<script src="http://example.com/Scripts/AfterGridInit.js"></script> 
<script src="http://example.com/Scripts/TinyMCE/tiny_mce.js"></script> 
<script src="http://example.com/Scripts/TinyMCE/jquery.tinymce.js"></script> 

    <script type="text/javascript"> 
    var 
     $grid, 
     lastSelectedRow, 
     autoedit = false, 

      jqXHRFromOnSuccess, 
      idsOfSelectedRows, 
      myColumnsState, 
      isColState, 
      myColumnStateName; 

    $.extend(true, $.jgrid.defaults, { 
     mtype: 'POST', 

     iconSet: "fontAwesome" , 
     navOptions: { 
      position: "center"}, 

     autoResizing: { compact: true,widthOfVisiblePartOfSortIcon: 13 }, 
     toppager: true, 
     viewrecords: false, 
     onSelectRow: grid_onSelectRow, 
     onSelectAll: grid_onSelectAll, 

     sortable: function (permutation) { 
      saveWindowState(); 
     }, 
     multiselect: true, 
     ajaxRowOptions: { async: true }, 
     scrollrows: true, 
     prmNames: { 
      id: "_rowid", page: "_page", rows: "_rows", oper: "_oper", sort: "_sidx", order: "_sord", 
      nd: "_nd" 
     }, 
     loadui: 'block', 



      cmTemplate: { fixed: true, autoResizable: true }, 
     autoencode: true, 
     gridview: true, 

     serializeGridData: function (postData) { 

      var myPostData = $.extend({}, postData); 
      myPostData._filters = myPostData.filters; 
      delete myPostData._oper; 
      delete myPostData.filters; 
      delete myPostData.searchField; 
      delete myPostData.searchString; 
      delete myPostData.searchOper; 
      return myPostData; 
     }, 

     shrinkToFit: false 

    }); 

    $.extend(true,$.jgrid.edit, { 
     beforeSubmit: function (postdata, formid) { 
      showModeless('Saving'); 
      return [true, ""]; 
     }, 

     closeAfterAdd: true, 
     recreateForm: true, 
     reloadAfterSubmit: false 
    }); 
</script> 
</head> 

<body> 
    <div id="container"> 

<script type="text/javascript"> 
    var editParams = { 
     // code added according to proposed answer 
     afterComplete: function (jqXhr, postdata, $form, formOper) { 
      if (formOper !== "add") { 
       var json = $.parseJSON(jqXhr.responseText); 
       $("#" + $.jgrid.jqID(postdata._rowid)).attr(json.Id); 
      } 
     }, 

     afterSubmit: function (response, postdata) { 
      return EditAddForm_AfterSubmit(response, postdata); 
     }, 

     url: 'http://example.com/Grid/Edit?_entity=Grnait', 
     closeAfterEdit: true 
     }; 

    function selectedRowsAction(action) { 
    } 

    $(function() { 
     'use strict'; 
     $('body').css('overflow-y', 'hidden'); 
     var urlFilters, 
       namedParameters = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'), 
       parameters = {}, 
       nameAndValue, 
       i, 
       cm= [{"hidden":false,"label":"Tegevus","name":"_actions","search":false,"width":72 
,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":true,"onSuccess":function (jqXHR) { jqXHRFromOnSuccess=jqXHR;return true;} 
,"delbutton":true,"delOptions":{"url":"http://localhost:52216/admin/Grid/Delete?_entity=Grnait","afterComplete":function (response, postdata, formid) { 
summarefresh($grid); 
$grid[0].focus(); 
} 
}}},{"label":"Objekt","name":"Grupp","index":"Grupp","edittype":"select","editoptions":{"formatter":"select","value":":;1:1;11:11;14:14;2:2;21:21;22:22;23:23;251:251;30:30;31:31;40:40;41:41","class":"ui-widget-content jqgrid-inlineedit-element","style":"width:100%;max-width:210px;height:130%","dataEvents":[{"type":"change","fn":function(e) { 
updateSelectValue(this, 'Grupp'); 
dataChanged(this); 
} 
},{"type":"keydown","fn":function(e) { 
if(!enter(e)) return; 
updateSelectValue(this, 'Grupp'); 
dataChanged(this); 
} 
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}} 
}]},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":70,"hidden":false},{"label":"Artikkel","name":"Toode","index":"Toode","edittype":"custom","editoptions":{"maxlength":20,"size":20,"lookup":"ToodeL","custom_element":function(value, options) { 
return combobox_element(value, options,'38','Toode','Grnait','YToode')} 
,"custom_value":combobox_value 
},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":60,"hidden":false},{"label":"Artikli nimi","name":"Toode0_nimetus","index":"Toode0_nimetus","edittype":"custom","editoptions":{"maxlength":0,"size":0,"lookup":"ToodeL","custom_element":function(value, options) { 
return combobox_element(value, options,'78','Toode0_nimetus','Grnait','ArtikliNimi%c3%9c%c3%bcriarvestusel')} 
,"custom_value":combobox_value 
},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":100,"hidden":false},{"label":"Algnäit","name":"Anait","index":"Anait","align":"right","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},"editoptions":{"maxlength":13,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)} 
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}} 
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":63,"classes":null,"hidden":false},{"label":"Kuu","name":"Kuu","index":"Kuu","editoptions":{"maxlength":6,"size":6,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)} 
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}} 
}],"readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":43,"classes":null,"hidden":false,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"stype":"text"},{"label":"Lõppnäit","name":"Lnait","index":"Lnait","align":"right","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},"editoptions":{"maxlength":13,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)} 
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}} 
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":74,"classes":null,"hidden":false},{"label":"Kogus","name":"Kogus","index":"Kogus","align":"right","searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},"editoptions":{"maxlength":13,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)} 
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}} 
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":71,"classes":null,"hidden":false},{"label":"Koguse jagamine","name":"Klassif1_nimetus","index":"Klassif1_nimetus","edittype":"select","editoptions":{"formatter":"select","value":":;R:Arvestuslik pind ;E:Elanike arvu järgi ;K:Korterite järgi ;:Kõigile sama ;V:Köetav pind ;P:Pindala järgi ","class":"ui-widget-content jqgrid-inlineedit-element","style":"width:100%;max-width:327px;height:130%","dataEvents":[{"type":"change","fn":function(e) { 
updateSelectValue(this, 'Kogusx'); 
dataChanged(this); 
} 
},{"type":"keydown","fn":function(e) { 
if(!enter(e)) return; 
updateSelectValue(this, 'Kogusx'); 
dataChanged(this); 
} 
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}} 
}]},"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"editable":true,"width":109,"hidden":false},{"label":null,"name":"Kogusx","index":"Kogusx","editoptions":{"maxlength":1,"size":1,"dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)} 
},{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}} 
}],"readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},"editable":true,"width":0,"classes":null,"hidden":true,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]},"stype":"text"}], 
       //colModel, 
       //sortName, 
       emptyMsgDiv = $('<div style="display:none"><br/>&nbsp;&nbsp;Ei leia</div>'); 


     $grid = $("#grid"); 
     myColumnStateName = "Grnait.0.colState"; // 'Grnait.colState'; 
     myColumnsState = restoreColumnState(cm, myColumnStateName); 
     isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null; 
     idsOfSelectedRows = isColState && typeof (myColumnsState.selectedRows) !== "undefined" ? 
            myColumnsState.selectedRows : []; 
     urlFilters = isColState ? myColumnsState.filters : {}; 

     $grid.jqGrid({ 
      postData: { filters: urlFilters 


          }, 
      datatype: "json", 

      rowNum: isColState ? myColumnsState.rowNum : 50, 
      url: 'http://example.com/Grid/GetData?_entity=Grnait', 
      colModel: cm, 
       editurl: 'http://example.com/Grid/Edit?_entity=Grnait', 


      beforeSelectRow: function (rowid, e) { 
       var $this = $(this), rows = this.rows, 
        startId = $this.jqGrid('getGridParam', 'selrow'), 
        startRow, endRow, iStart, iEnd, i, rowidIndex, 
        colName = $.jgrid.getCellIndex($(e.target).closest('td')[0]), 
       $self = $(this), 
       savedRow = $self.jqGrid("getGridParam", "savedRow"), 
       cmd = $grid.jqGrid('getGridParam', 'colModel'); 


       $("body").children("ul.ui-jqgrid-showHideColumnMenu").menu("destroy").remove(); 


       if (cmd[colName].name === 'cb') { 
        return true; 
       } 


       if (savedRow.length > 0 && savedRow[0].id !== rowid) { 
        //    if (typeof (lastSelectedRow) !== "undefined" && lastSelectedRow !== rowid) { 
        cancelEditing($grid); 
       } 

       if (!autoedit || ClickedInActionButton(e)) { 
        resetSelection(); 
        return true; 
       } 


       if (lastSelectedRow !== rowid) { 
        jqGrid_editRow(rowid, afterGridSaveFunc, colName); 

        // PutFocus(e.target); 
       } 
           PutFocus(e.target); 
       return true; 
      }, 




      ondblClickRow: function(rowId,iRow,iCol,e) { 

       if (autoedit) { 
        return; 
       } 

       if (isInlineEdit()) { 
        return; 
       } 
       openDetail(rowId); 
       PutFocus(e.target); 
      }, 
      formDeleting: formDeletingTemplate 
     }); 


     emptyMsgDiv.insertAfter($grid.parent()); 

     $grid.jqGrid('bindKeys', { 
      scrollingRows: true, 
      onEnter: openDetail 
     } ); 


     $grid.jqGrid("navGrid", "#grid_toppager", { 
      edit: true 
     }, 
     editParams, 
     { 
     }, 

    { 
    }, 
     searchParams 
    , 
     {   } 
       ); 

     var reloadWithNewFilterTemplate = function() { 
      $grid.trigger('reloadGrid', [{current: true, page: 1}]); 
     }; 
     GridCommon(false, 'Grnait',-1); 

    }); 

    function openDetail(rowId) { 
     jqGrid_editRow(rowId, afterGridSaveFunc,false); 
    } 

    function addDocument() { 
    } 

    function onInlineEdit(rowId) { 
     var savedRow = $grid.jqGrid("getGridParam", "savedRow"); 
     if (savedRow.length > 0 && savedRow[0].id !== rowId) { 
      // if (rowId && rowId !== lastSelectedRow) { 
       cancelEditing($grid); 
      lastSelectedRow = rowId; 
     } 
    } 

    function PutFocus(target) { 
     $("input, select",target).select(); 
      } 

    function afterGridSaveFunc(rowId, response) { 
      aftersavefunc(rowId, response); 
    } 
</script> 
<script type="text/javascript"> 
    function EditAddForm_AfterSubmit(response, postdata) { 
     clearModeless(); 
     if (response.responseText.charAt(0) === '{') { 
      var json = $.parseJSON(response.responseText); 
        postdata['Grupp'] = json.PrimaryKeyValues[0]; 
        postdata['Kuu'] = json.PrimaryKeyValues[1]; 
        postdata['Toode'] = json.PrimaryKeyValues[2]; 
      return [true, '', json.Id]; 
     } 
     alert(decodeErrorMessage(response.responseText, '', '')); 
     return [false, decodeErrorMessage(response.responseText, '', ''), null]; 
    } 


    var afterSaveFuncAfterAdd = function(rowId, response) { 
     var data = $.parseJSON(response.responseText); 
     $(this).jqGrid('setRowData', rowId, { Grupp: data.PrimaryKeyValues[0] }); 
     cancelEditing($grid); 
    afterGridSaveFunc(rowId,response); 
     jqXHRFromOnSuccess=null; 
    }; 


    $.extend(true, 
    $.jgrid.inlineEdit, { 

     position: "beforeSelected", 
     focusField: false, 
     restoreAfterError: false, 
     afterrestorefunc: function(rowId) { 
      updateButtonState($grid, rowId); 
      setFocusToGrid(); 
      lastSelectedRow = undefined; 
     }, 
     aftersavefunc: function(rowId, response) { 
      afterSaveFuncAfterAdd(rowId, response); 
     }, 
     oneditfunc: function(rowId) { 
      onInlineEdit(rowId); 
      updateButtonState($grid, rowId); 
     }, 
     keys: true, 
     rowID: '_empty', 
     useDefValues: true, 
     extraparam: { _dokdata: getEevaFormData }, 
     errorfunc: errorfunc 
    }); 
</script> 
    <div id="grid1container" style="width: 100%; height: 100%"> 
     <table id="grid"></table> 
    </div> 
     </div> 
    </div> 
</body> 
</html>

更新

我加afterComplete根据回答并验证正确的ID传递给attr()。问题依然存在。在第二种形式或内联编辑错误的键仍然传递给服务器。我更新了下面的测试用例。

来源

2015-04-12 Andrus

如果我正确地使用'格式的自定义按钮提醒我： “行动”'。在[免费jqGrid的最后更改]（https://github.com/free-jqgrid/jqGrid/commit/9d838631c6c1a3809b3e61483421a77ab1740e01）可能会对您有所帮助。看[演示]（http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton.htm） – Oleg

看来你想在编辑后改变行的rowid。使用prmNames: { id: "_rowid", ...}选项将编辑数据发送到服务器。因此postdata._rowid应该包含编辑行的rowid。从编辑似乎后，服务器的响应看起来像

{"PrimaryKeyValues":["1","change","004"],"Id":"1ä_63_68_61_6E_67_65ä004"}

其中Id属性包含编辑一行之后新的rowid。在这种情况下，你可以使用afterComplete回调

afterComplete: function (jqXhr, postdata, $form, formOper) { 
    if (formOper !== "add") { 
     var json = $.parseJSON(jqXhr.responseText), 
      p = $(this).jqGrid("getGridParam"), 
      oldId = p.idPrefix + postdata._rowid, 
      newId = p.idPrefix + json.Id, 
      i; 
     $("#" + $.jgrid.jqID(oldId)).attr("id", newId); 
     if (p.selrow === oldId) { 
      p.selrow = newId; 
      i = $.inArray(oldId, p.selarrrow); 
      if (i >= 0) { 
       p.selarrrow[i] = newId; 
      } 
     } 
    } 
}

您应该包括在其中使用的形式编辑editParams这样的回调：

var editParams = { 
    afterSubmit: function (response, postdata) { 
     return EditAddForm_AfterSubmit(response, postdata); 
    }, 
    afterComplete: function (jqXhr, postdata, $form, formOper) { 
     if (formOper !== "add") { 
      var json = $.parseJSON(jqXhr.responseText), 
       p = $(this).jqGrid("getGridParam"), 
       oldId = p.idPrefix + postdata._rowid, 
       newId = p.idPrefix + json.Id, 
       i; 
      $("#" + $.jgrid.jqID(oldId)).attr("id", newId); 
      if (p.selrow === oldId) { 
       p.selrow = newId; 
       i = $.inArray(oldId, p.selarrrow); 
       if (i >= 0) { 
        p.selarrrow[i] = newId; 
       } 
      } 
     } 
    }, 
    url: 'http://example.com/Edit?_entity=Grnait', 
    closeAfterEdit: true, 
};

来源

2015-04-13 20:23:02 Oleg

我试过了，但问题依然存在。新的json.Id在afterComplete中传递给attr（），但第二次编辑旧ID仍然传递给服务器。我更新了更改测试用例的问题。 – Andrus

@安德鲁斯：我修复了代码。 – Oleg

谢谢。它正在工作。这可以添加到jqgrid源代码吗？此代码只能在表单编辑后运行。为什么使用if（formOper！==“add”）'？ – Andrus

如何在免费的jqgrid中编辑表格后设置行ID值

回答

相关问题