グリッド上でjqGridを反復処理するサブグリッド内のデータ

Question

グリッドオブジェクトに含まれるデータ全体を繰り返し処理したいと思います。 私のグリッドは、サブグリッドオブジェクトが含まれる定義を持っており、私はデータを反復処理するには、この1のようなコードを使用することができます知っているこのよう

var grid = $(gridID); 
var pager = $(pagerID); 
grid.jqGrid({ 
    url: GetBaseWSUrl() + 'MyWs.asmx/MyMethod', 
    colNames: ['UMLT', 'FF', 'PC'], 
    colModel: [ 
      { name: 'Name', index: 'Name', width: 180, template: colTextTemplate }, 
      { name: 'AlertFF', index: 'AlertFF', width: 22, align: 'center', sortable: false, formatter: "checkbox", formatoptions: { disabled: false} }, 
      { name: 'AlertPC', index: 'AlertPC', width: 22, align: 'center', sortable: false, formatter: "checkbox", formatoptions: { disabled: false} } 
     ], 
    [...] 
    subGrid: true, 
    subGridOptions: { 
     "plusicon": "ui-icon-triangle-1-e", 
     "minusicon": "ui-icon-triangle-1-s", 
     "openicon": "ui-icon-arrowreturn-1-e", 
     "reloadOnExpand": true, 
     "selectOnExpand": true 
    }, 
    subGridRowExpanded: function (subgrid_id, row_id) { 
     var subgrid_table_id = subgrid_id + "_t"; 
     $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>"); 
     $("#" + subgrid_table_id).jqGrid({ 
      [...] omitted for brevity 
     }); 
    } 
}); 

を作成し、効果的にそれが最初のレベルのために動作しますが、私は探しています私がサブグリッドデータでさえも反復することを可能にする方法のために。

var grid = $('#grid'); 
var m = grid.getDataIDs(); 
for (var i = 0; i < m.length; i++) { 
    var record = grid.getRowData(m[i]); 
    //do something with the record 
} 

これを達成する方法はありますか？

Answer 1

OK。 the answerおよびthis oneでは、グリッド行をほとんど効果的に列挙する方法を説明します。おそらく、jQueryでもっとうまく動作し、DOMではなく、コードがあなたのために奇妙に見えるでしょう。 DOM要素を使用するのが安全かどうかという質問がありましたか？代わりにjQueryを使用するほうがいいですか？だから私はすべての前に、私は質問に答えて、それが最良の方法だと思う理由を説明しようとします。あなたが結果コードにのみ関心があり、説明にない場合は、私の答えの一部を飛ばすことができます。

$('#grid')は、HTML DOM <table> objectのjQueryラッパーです。テーブルDOMオブジェクト（HTMLTableElement）$('#grid')[0]はのグリッド行のコレクションです：<tr> DOM要素（HTMLTableRowElement）のコレクションです。 0から始まる$('#grid')[0].rows[i]のインデックスごとにグリッド行を反復することができます.Rowid（<tr> elementのID）を知っていれば、$('#grid')[0].namedItem[rowid]に関して対応する<tr> DOMオブジェクトを取得できます。したがって、rowsは、プロパティを持つ DOM要素のコレクションです。グリッドのi番目の行のj番目の列の包含を調べる場合は<td>要素を直接$('#grid')[0].rows[i].cells[j]で得ることができます。列名のみが分かっている場合は、colModel配列を調べて、必要なプロパティnameを持つ列を検索できます。 colModel配列のインデックスがjの場合、$('#grid')[0].rows[i].cells[j]式のインデックスを使用できます。

rowsコレクションとnamedItemメソッドは、W3C標準の一部です（hereおよびhereを参照）。ですので、は本当に安全ですがそこに使用されています。すべてのブラウザにはrowsコレクションがあり、すべてのブラウザにネイティブコード（!!!）があり、namedItemという方法でコレクション内のrowsコレクションにすばやくインデックスを設定しています。 jqGridは内部的にこれらを永続的に使用し、jqGridが素早く動作する理由です。 jQueryは、内部的にDOMを使用するJavaScriptライブラリです。ネイティブのブラウザコードほど速くない可能性があります。位置や幅の計算などのいくつかの状況では、すべてのWebブラウザで情報を正しく取得するための多くのトリックがありますが、HTMLテーブルDOMを使用する作業はW3 standardです。ここでjQueryを使用すると利点はありません。

私の古い回答には、grid.getDataIDs()というコードを使用していました。今度はthe answerのコードに従うことをお勧めします。サブグリッドと他の行については、1つの発言だけです。

jqGridには4種類の異なる種類の<tr>要素が4種類あります。したがって、<tr>要素のクラスを調べて、行にサブグリッド、グループ化ヘッダー、標準行、または列の幅を設定するために内部的に使用される非表示の最初の行が含まれているかどうかを調べることができます。あなたは、標準のグリッド行であるrowを持っている場合

var grid = $('#grid')[0], rows = grid.rows, 
    cRows = rows.length, iRow, row, trClasses; 

    for (iRow = 0; iRow < cRows; iRow++) { 
     row = rows[iRow]; // row.id is the rowid 
     trClasses = row.className.split(' '); 
     if ($.inArray('jqgrow', trClasses) > 0) { 
      // the row is a standard row 
     } else if ($.inArray('ui-subgrid', trClasses) > 0) { 
      // the row contains subgrid (only if subGrid:true are used) 
     } else if ($.inArray('jqgroup', trClasses) > 0) { 
      // the row is grouping header (only if grouping:true are used) 
     } else if ($.inArray('jqfoot', trClasses) > 0) { 
      // the row is grouping summary (only if grouping:true are used) 
      // and groupSummary: [true] inside of groupingView setting 
     } else if ($.inArray('jqgfirstrow', trClasses) > 0) { 
      // the row is first dummy row of the grid. we skip it 
     } 
    } 

は今、あなたは「AlertFF」名前を持つ列からチェックボックスを調べることができます。まず、列のインデックスをループ外に取得する必要があります。 ：var iCol = getColumnIndexByName($('#grid'), 'AlertFF')の小さいgetColumnIndexByNameメソッドを使用できます。今if ($.inArray('jqgrow', trClasses) > 0)の身体の内側に、あなたは$('#grid')のような同じ構造を持っているあなたはsubgridTableを得るようにして

... 
} else if ($.inArray('ui-subgrid', trClasses) > 0) { 
    // the row contains subgrid 
    var subgridTable = $(row).find("table.ui-jqgrid-btable:first"); 
    // you can work with the subgridTable like with a grid 
} 

次はあなたが行うことができます使用subgrid as gridからのデータを調べるために

if ($.inArray('jqgrow', trClasses) > 0) { 
    if ($(row.cells[iCol]).children("input:checked") > 0) { 
     // the checkbox in the column is checked 
    } 
} 

を行うことができますそこから始めました。前に説明したように、サブグリッドの包含を調べることができます。