的jqGrid：表格編輯作業保存到行，但尋呼向後或向前

Question

我使用表單編輯本地數據時，會丟失所有更改。我能夠編輯表單中的值並將值設置回行（使用setRowData）。 但是，當我來回頁面時，更改將丟失。

如何將更改保存到網格中的行和底層源？後來我必須迭代行，驗證所有的錯誤（使用編輯表單）並將其發佈到服務器。

代碼：

var gridId = 'mygrid'; 
var pagerId = 'mygridpager'; 

var grid = $('#mygrid'); 
var pager = $('#mygridpager'); 

grid.jqGrid({ 
    caption: caption, 
    colModel: getColModel(), 
    recreateForm: true, 

    hidegrid: true, 
    sortorder: 'desc', 
    viewrecords: true, 
    multiselect: true, 
    rownumbers: true, 

    autowidth: true, 
    height: '100%', 
    scrollOffset: 0, 

    datatype: 'local', 
    data: dataAsArray, 
    localReader: { 
     repeatitems: true, 
     cell: '', 
     id: 2 
    }, 

    pager: '#' + pagerId, 
    pgbuttons: true, 
    rowNum: 5, 
    rowList: [2, 5, 7, 10, 250, 500] 
}); 

grid.jqGrid('navGrid', 
    '#' + pagerId, 
    { 
     add: false, 
     del: false, 
     search: false, 

     edit: true, 
     edittext: 'Fix Error', 
     editicon: 'ui-icon-tag', 
     editurl: 'clientArray', 

     refreshtext: 'Refresh', 
     recreateForm: true 
    }, 
    { 
     // edit options 
     editCaption: 'Fix Error', 
     editurl: 'clientArray', 
     recreateForm: true, 
     beforeShowForm: function(form) { 
      /* Custom style for elements. make it disabled etc */ 
     }, 
     onclickSubmit: function(options, postdata) { 
        var idName= $(this).jqGrid('getGridParam').prmNames.id; 

        // [UPDATED] 
        if (postdata[idName] === undefined) { 
         var idInPostdata = this.id + "_id"; 
         postdata[idName] = postdata[idInPostdata]; 
         postdata['row'] = postdata[idInPostdata]; 
        } 

      $('#mygrid').jqGrid('setRowData', postdata.row, postdata); 

      if (options.closeAfterEdit) { 
       $.jgrid.hideModal('#editmod' + gridId, { 
        gb: '#gbox_' + gridId, 
        jqm: options.jqModal, 
        onClose: options.onClose 
       }); 
      } 

      options.processing = true; 

      return {}; 
     } 
    }, 
    {}, // add options 
    {}, // del options 
    {} //search options 
).trigger('reloadGrid'); 

您的幫助表示讚賞。

感謝

Answer 1

我假設你的問題的原因是輸入數據的排列格式（repeatitems: true在localReader）的使用。我想你需要從postdata建立數組，並用它作爲參數setRowData而不是postdata。

如果諮詢會不幫你，你應該張貼與測試數據網格的更完整的代碼。像colModel: getColModel(),這樣的代碼並沒有真正的幫助。換句話說你應該發佈足夠的信息到重現的問題。最好的將是http://jsfiddle.net/中的工作演示。如果你準備這樣的演示，請使用jquery.jqGrid.src.js而不是jquery.jqGrid.min.js。

修訂：在你的代碼的問題是使用數組是一個項目，如果輸入data（你localReader使用repeatitems: true）。 setRowData的當前實施不支持（工作不正確）的情況下。例如，如果你有這樣的數據最初

，並開始第三行的編輯使用類似$('#mygrid').jqGrid('setRowData', postdata.row, postdata);的onclickSubmit裏面後，你將有類似如下

。所以內部數據將被錯誤地修改。

要解決，我建議由包括下面的代碼

$.jgrid.extend({ 
    setRowData : function(rowid, data, cssp) { 
     var nm, success=true, title; 
     this.each(function(){ 
      if(!this.grid) {return false;} 
      var t = this, vl, ind, cp = typeof cssp, lcdata=t.p.datatype === "local" && t.p.localReader.repeatitems === true? [] : {}, iLocal=0; 
      ind = $(this).jqGrid('getGridRowById', rowid); 
      if(!ind) { return false; } 
      if(data) { 
       try { 
        $(this.p.colModel).each(function(i){ 
         nm = this.name; 
         var dval =$.jgrid.getAccessor(data,nm); 
         if(dval !== undefined) { 
          vl = this.formatter && typeof this.formatter === 'string' && this.formatter === 'date' ? $.unformat.date.call(t,dval,this) : dval; 
          if (t.p.datatype === "local" && t.p.localReader.repeatitems === true) { 
           lcdata[iLocal] = vl; 
          } else { 
           lcdata[nm] = vl; 
          } 
          vl = t.formatter(rowid, dval, i, data, 'edit'); 
          title = this.title ? {"title":$.jgrid.stripHtml(vl)} : {}; 
          if(t.p.treeGrid===true && nm === t.p.ExpandColumn) { 
           $("td[role='gridcell']:eq("+i+") > span:first",ind).html(vl).attr(title); 
          } else { 
           $("td[role='gridcell']:eq("+i+")",ind).html(vl).attr(title); 
          } 
         } 
         if (nm !== "cb" && nm !== "subgrid" && nm !== "rn") { 
          iLocal++; 
         } 
        }); 
        if(t.p.datatype === 'local') { 
         var id = $.jgrid.stripPref(t.p.idPrefix, rowid), 
         pos = t.p._index[id], key; 
         if(t.p.treeGrid) { 
          for(key in t.p.treeReader){ 
           if(t.p.treeReader.hasOwnProperty(key)) { 
            delete lcdata[t.p.treeReader[key]]; 
           } 
          } 
         } 
         if(pos !== undefined) { 
          t.p.data[pos] = $.extend(true, t.p.data[pos], lcdata); 
         } 
         lcdata = null; 
        } 
       } catch (e) { 
        success = false; 
       } 
      } 
      if(success) { 
       if(cp === 'string') {$(ind).addClass(cssp);} else if(cssp !== null && cp === 'object') {$(ind).css(cssp);} 
       $(t).triggerHandler("jqGridAfterGridComplete"); 
      } 
     }); 
     return success; 
    } 
}); 

我稍後會發布我的建議，trirand覆蓋當前執行的setRowData問題。所以人們可以希望在下一個版本的jqGrid中解決這個問題。