Jqueryグリッドを使用したASP.Net MVC

Question

私は実際の画面の簡略化されたバージョンにいくつかのドロップダウンコントロールがあり、ユーザーがカテゴリを選択してからサブカテゴリを選択できるようにしています。追加]ボタンをクリックします。 Addボタンは、新しい行をJQuery Gridに追加します（enter link description here）。

次に、コントロールがリセットされ、ユーザーが別のカテゴリ、サブカテゴリ、および金額を選択できるようにしてから、もう一度追加をクリックしてデータをグリッドに追加します。

 $(function() { 
     $('#addSplit').click(function() { 
      var mydata = [ 
          { category: $('#SelectedCategoryId option:selected').text(), subcategory: $('#SelectedSubCategoryId option:selected').text(), costcenter: $('#SelectedCostCenterId option:selected').text(), budget: $('#SelectedBudgetId option:selected').text(), amount: $('#amount').val() } 
         ]; 

      for (var i = 0; i <= mydata.length; i++) 
       jQuery("#list4").jqGrid('addRowData', i + 1, mydata[i]); 
     }); 
    }); 

行が順調に追加されています。 （私は何とかIDを格納するために非表示の列を追加する必要があります）。

次に、ユーザーは[保存]をクリックします。私は何とかグリッドを繰り返し、（追加される）IDをつかんで、何とかモデルに戻して、私のMVCコントローラに戻して保存したいと思います。

これはできますか？それとも、私がやろうとしていることに対して、より良いアイデアはありますか？

Answer 1

colModelを定義する必要があります。真その後

あなたがあなたの関数を呼び出すことができます。あなたが最初の列が非表示になって見ることができるように：（DataToLoadデータ）

function LoadGrid(DataToLoad)  { 
    jQuery("#list4").jqGrid({ 
     data: DataToLoad, 
     datatype: "local", 
     width: 790, 
      height: 250, 
     rowNum: 999999, 
     colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
     colModel:[ 
      {name:'id',index:'id', hidden:true, sorttype:"int"}, 
      {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"}, 
      {name:'name',index:'name', width:100}, 
      {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"}, 
      {name:'tax',index:'tax', width:80, editable: true, align:"right",sorttype:"float"},  
      {name:'total',index:'total', width:80,align:"right",sorttype:"float"},  
      {name:'note',index:'note', width:150, sortable:false}  
     ], 
     emptyrecords: "No records to view", 
     cellEdit: true, 
     cellsubmit: 'clientArray', 
     viewrecords: true, 
     shrinkToFit: false, 
     scroll: false, 
     rownumbers: true, 
     hidegrid: false, 
     pager: "#plist47", 
     caption: "Manipulating Array Data" 
    }); 
} 

私は、データの配列を受け取る関数を定義し、それをバインドします配列ではなく、グリッドに行を追加することで、ロードされた：

$("#addSplit").bind('click', function(){ 
    jQuery("#list4").GridUnload(); 
    // LOAD the ARRAY here. 
    LoadGrid(mydata); 
}); 

が@vandaloグリッドにjQuery("#list4").GridUnload();