jqgridインライン編集行とデータが

Question

を並べていない私は、インライン編集とjqgridを実装しました：

var lastSel; 

    jQuery(document).ready(function() { 

     jQuery("#list").jqGrid({ 
      url: '/Home/DynamicGridData/', 
      datatype: 'json', 
      mtype: 'POST', 
      colNames: ['Actions', 'Id', 'note', 'tax'], 
      colModel: [ 
      {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions', 
        formatoptions:{ 
         keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing. 
         onEdit:function(rowid) { 
          alert("in onEdit: rowid="+rowid+"\nWe don't need return anything"); 
         }, 

         },}, 
       { name: 'Id', index: 'Id', width: 55,align:'center', editable: false }, 
       { name: 'note', index: 'note', width: 40,align:'center', editable: true }, 
       { name: 'tax', index: 'tax', width: 40,align:'center', editable: true}], 
      pager: jQuery('#pager'), 
      rowNum: 10, 
      rowList: [5, 10, 20, 50], 
      sortname: 'Id', 
      sortorder: "desc", 
      viewrecords: true, 
      imgpath: '', 
      caption: 'My first grid', 
      editurl: '/Home/Save/' 
     }); 
     jQuery("#list").navGrid('#pager', { edit: false, search: false, add: false }); 
    }); 

問題が期待どおりに動作していないということです。問題は、グリッドが読み込まれてIdデータが「アクション」列にロードされたときに、ノートデータがID列に追加され、税データがノート列に追加されることです。税の列は空です。これは、データがロードされたときに現在アクションの列に何もないためだと思いますか？

とにかく、アクションアイコンボタンが読み込まれたときに、アクション列に正しく読み込まれていて、間違った列にあるIDデータの上に表示されます。

これを他の作業例と比較しましたが、これまでに問題が見つかりませんでした。

EDIT：

は、ちょうどこの問題は、JSONデータではなく、ローカルデータで発生発見しました。

あなたはそれをのようなJSONデータフィードのであれば：

public JsonResult DynamicGridData2(string sidx, string sord, int page, int rows) 
     { 
      int totalPages = 1; // we'll implement later 
      int pageSize = rows; 
      int totalRecords = 3; // implement later 

      var jsonData = new { 
       total = totalPages, 
       page = page, 
       records = totalRecords, 
       rows = new[]{ 
        new {id = 1, cell = new[] {"1", "Note1", "Tax1"}}, 
        new {id = 2, cell = new[] {"2", "Note2", "Tax2"}}, 
        new {id = 3, cell = new[] {"3", "Note3", "Tax3"}} 
       } 
      }; 
      return Json(jsonData); 
     } 

をエラーが発生します。ただし、次のようなローカルデータを指定した場合：

data: mydata, 
datatype: 'local', 

var mydata = [ 
        {id:"1", note:"Note1", tax:"Tax1"}, 
        {id:"2", note:"Note2", tax:"Tax2"}, 
        {id:"3", note:"Note3", tax:"Tax3"} 
       ] 

いいです。

Answer 1

私はあなたに問題の2つの解決方法を提案できます。最初のものはとても簡単です。

{ 
    "total": "1", 
    "page": "1", 
    "records": "3", 
    "rows": [ 
     { "id": "1", "cell": ["", "1", "Note1", "Tax1"] }, 
     { "id": "2", "cell": ["", "2", "Note2", "Tax2"] }, 
     { "id": "3", "cell": ["", "3", "Note3", "Tax3"] } 
    ] 
} 

場合、コードは次のようなJSONデータが生成されます

public JsonResult DynamicGridData2(string sidx, string sord, int page, int rows) 
{ 
    // ... 
    var jsonData = new { 
     // ... 
     rows = new[]{ 
      new {id = 1, cell = new[] {"", "1", "Note1", "Tax1"}}, 
      new {id = 2, cell = new[] {"", "2", "Note2", "Tax2"}}, 
      new {id = 3, cell = new[] {"", "3", "Note3", "Tax3"}} 
     } 
    }; 
    return Json(jsonData); 
} 

、データが正しく表示されます：あなたはcell配列の最初の列として「」含める必要があります最初に表示しますデモhere。

私がお勧めすることができ、他の方法は、以前と同じサーバーコードを使用するが、データが読み込まれますどのようにクライアント側で定義することです：

colModel: [ 
    {name: 'act', index: 'act', width: 55, sortable: false, formatter: 'actions', 
     formatoptions: { 
      // we want use [Enter] key to save the row and [Esc] to cancel editing. 
      keys: true, 
      onEdit:function(rowid) { 
       alert("in onEdit: rowid="+rowid+"\nWe don't need return anything"); 
      } 
     }, 
     jsonmap: function (obj) { return ''; }}, 
    { name: 'Id', index: 'Id', width: 55, 
     jsonmap: function (obj) { return obj.cell[0]; } }, 
    { name: 'note', index: 'note', width: 40, editable: true, 
     jsonmap: function (obj) { return obj.cell[1]; } }, 
    { name: 'tax', index: 'tax', width: 40, editable: true, 
     jsonmap: function (obj) { return obj.cell[2]; } } ], 
jsonReader: { repeatitems: false }, 
cmTemplate: { align: 'center' } 

は、次のデモhereを参照してください。

この例では、最初にjsonReader: { repeatitems: false }パラメータを定義し、colModelの列順序のように1対1の順序の配列だけでなく、今、我々は、例えば

{ "id": "1", "cell": ["1", "Note1", "Tax1"] } 

ような行オブジェクトを含有するカラムを読み取るように定義するjsonmapを使用することができます。 idプロパティ（ 'Id'ではなく）は、jqGridによって標準的な方法で読み込まれます。 JSONデータの行に含まれる他のセルを読み取るには、jsonmap関数が呼び出されます。 cell配列から正しい文字列を返します。

あなたがあなただけのためにkey: trueプロパティを追加する必要があります場合は

["1", "Note1", "Tax1"] 

にデータを表す行を交換する場合は、JSONデータのサイズを簡素化し、減らすことができることを理解することが比較的明確です'Id'列を開き、jsonmap関数を変更します。たとえば、'tax'列の場合は、jsonmap: function (obj) { return obj[2]; } }にする必要があります。

最終的にはthe answerの更新部分をご覧になることをお勧めします。ここでVS2008またはVS2010デモプロジェクトをダウンロードできます。デモがあなたに役立つかもしれないと私には思われます。