jqGridで私が達成しようとしているものの

Question

シナリオ処理の前に、サーバから受信したデータを変更する方法：

• は、私は、サーバーから
• Iループデータをいくつかのデータを取得し、追加を/いくつかのフィールドの値を変更し、データがグリッドに表示されている
は
• ユーザがローカル
終了
• は、ユーザがグリッド全体のデータを送信データを編集しますサーバー

私はそれを達成しようとした方法

：

私はloadonce:true、editurl:'clientArray'とインライン編集でjqGridを作りました。 loadCompleteでは、サーバーから受信したデータをループし、いくつかの値を追加します。外部ボタンは、.jqGrid('getGridParam','data')を使用してグリッドデータを取得し、それをサーバーに送信するために使用されます。

loadComplete: function(data){ 
    for(var i=0; i<data.rows.length; i++){ 
     var row = data.rows[i]; 
     grid.jqGrid('setRowData', row.id, { 
     missingData: 'someDefaultValue' 
     }); 
    } 
} 

問題：loadCompleteイベントが発生し、ユーザーがグリッドのページを変更したり、検索を行います。その結果、彼によって編集されたデータが上書きされます。 beforeProcessingイベントを代わりに使用しようとしましたが、は発生しません（編集：ローカルデータでテストすると機能しませんでしたが、loadonceで動作します）。私はdocumentationの他の適切なイベントを見つけることができませんでした。

thisデモでシナリオを再現しました。

質問：質問：サーバーからデータを受信した後、データを正しく変更し、ユーザーがページを変更したり検索したときに編集内容を上書きせずにローカルで編集できるようにするにはどうすればよいですか？

注：私は1つは、サーバからロードされたデータには、いくつかの変更を行うbeforeProcessingの代わりloadCompleteを使用する必要があり、自由jqGrid 4.14

Answer 1

を使用しています。コールバックはloadonce: trueシナリオでは非常に実用的です。なぜなら、サーバーからデータをロードした後に1回だけコールされるからです。

HTMLページのDOMの変更番号を減らそうとする必要があります。 HTMLパーサーで処理する前にデータを変更すると、非常に迅速に動作します：1つのプロパティーを変更すると、プロパティーだけが変更されます。一方、HTMLページ上のある要素を変更すると、再計算が行われ、たぶんすべての要素がページに存在します。たとえば、グリッド上に要素を挿入します。グリッドの位置（したがってグリッドの他のすべての要素）は変更されます。少なくともウェブブラウザは、のすべての変更が必要かどうかを確認する必要があります。既存の要素が必要です。それはbrowser reflowです。 （setRowDataの中のloadCompleteのような）ループのHTML要素を変更すると、HTMLページの速度が本質的に低下します。

もう1つの発言。JSFiddleのエコーサービス（hereを参照）を使用して、サーバーからのデータのロードをシミュレートすることをお勧めします。対応するコードは、次のことができます：

var i, data = [], grid = $('#grid'); 

for(i=0; i<4; i++) { 
    data.push({id:i, select1: i%3}); 
} 

grid.jqGrid({ 
    datatype: "json", 
    mtype: "POST", 
    url: "/echo/json/", 
    postData: { 
     json: JSON.stringify(data) 
    }, 
    loadonce: true, 
    forceClientSorting: true, 
    caption: 'Testing', 
    editurl: 'clientArray', 
    rowNum: 2, 
    rowList: [2, 4], 
    pager: true, 
    colModel: [ 
     {name:'select1', label: 'Server status', editable:true, edittype:'select', formatter:'select', template: "integer", editoptions:{ 
      value:'0:AAA;1:BBB;2:CCC' 
     }}, 
     {name:'select2', label: 'Local status', editable: true, edittype: 'select', formatter:'select', editoptions:{ 
      value:'0:AAA;1:BBB;2:CCC' 
     }}, 
     {name:'act', template:'actions'} 
    ], 
    inlineEditing: { 
     keys: true 
    }, 
    beforeProcessing: function(data){ 
     var i; 
     for(i=0; i<data.length; i++){ 
      data[i].select2 = 0; 
     } 
    } 
}); 

$('#b1').click(function(){ 
    $('#out').empty() 
    var i, gridData = grid.jqGrid('getGridParam','data'); 
    for(i=0; i<gridData.length; i++){ 
     out(JSON.stringify(gridData[i])); 
    } 
}); 

function out(message){ 
    $('#out').append('<p>' + message +'</p>'); 
} 

参照デモhttps://jsfiddle.net/OlegKi/c09fnaca/8/を変更しました。私はtemplate: "integer"を最初の列に追加して、データの数値への変換を実証しました。無料のjqGridはconvertOnSaveコールバック（the wiki article参照）をサポートしています。ローカルデータを保存するときに何らかの変換を行うのに役立ちます。例えば、最初の列に使用されるデータを文字列としてデータを保持しているのではなく、数値に変換される結果として、次のコールバック（コードのthe lines参照）

convertOnSave: function (options) { 
    var nData = options.newValue; 
    return isNaN(nData) ? nData : parseInt(nData, 10); 
} 

を定義します。