すべての行をプログラムで選択して選択します

Question

JavaScriptを使用してBootgridテーブルのすべての行をプログラムで選択するにはどうすればよいですか？

アクションバーにボタンを追加しました.JQuery Bootgridテーブルのすべての行をループする機能があります。

これまでのところ、テーブル内のすべての行id（data-row-id）を取得しています。これは、ブートグリッドテーブル内の他のページでも同じです。

ここからすべての行を選択し、プログラムで選択を保持するにはどうすればよいですか？

おかげ

以下

コード：

// JS 
<script> 
    $(document).ready(function() { 
     var count = 0; 
     var dt = $("#table1").bootgrid({ 
      selection: true, 
      multiSelect: true, 
      keepSelection: true, 
      rowSelect: true 
     }).on("selected.rs.jquery.bootgrid", function (e, rows) { 
      var rowIds = []; 
      for (var i = 0; i < rows.length; i++) { 
       count++; 
      } 

      $('#NumSelected').html(count); 
      console.log(count); 

     }).on("deselected.rs.jquery.bootgrid", function (e, rows) { 
      var rowIds = []; 
      for (var i = 0; i < rows.length; i++) { 
       count--; 
      } 

      $('#NumSelected').html(count); 
      console.log(count); 

     }); 

     var rows = dt.data('.rs.jquery.bootgrid').rows; 

     // Get all Ids in the table and log 
     for(var i = 0; i < rows.length; i++) 
     { 
      console.log(rows[i].ID); 
     } 

     // append button in action bar 
     $(".bootgrid-header .actionBar").find('.actions.btn-group').append('<button id="selectAll" class="btn btn-default" type="button" title="Select All Clients Listed"><span class="icon glyphicon glyphicon-saved"></span></button>'); 


     // Select all rows in table 
     // This is not working, I have data paginated in 8 pages (80 rows) 
     // and the code below only select the data in the first page 

     // I want to select all rows in the table and keep the selection by using jquery bootgrid 
     $("#selectAll").click(function() { 
      $('#table1 tbody > tr').each(function() { 
       $(this).addClass('active').attr('aria-selected', true); 
       $(this).find(":checkbox").prop('checked', true); 
      }); 

      // get all selected rows id in array 
      var selectedRowsId = $("#table1").bootgrid('getSelectedRows'); 
      console.log(selectedRowsId); 
     }); 

    }); 
</script> 


// html 
<table id="table1"> 
<thead> 
<tr> 
<th data-column-id="ID" data-identifier="true" data-type="numeric">ID</th> 
<th data-column-id="Name" data-type="string">Name</th> 
<th data-column-id="OtherDetails" data-type="string">Other Details</th> 
</tr> 
</thead> 
<tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td>@item.ID</td> 
       <td>@item.Name</td> 
       <td>@item.OtherDetails</td> 
      </tr> 
     } 
    </tbody> 
</table> 

Answer 1

まず、それは（あなたがすでに正しく行われてきたように）のように、

var dt = $("#table1").bootgrid({ 
     selection: true, 
     multiSelect: true, 
     keepSelection: true, 
     rowSelect: true 
     ... 

セカンドをグリッドのinitの値を設定することが重要ですbootgridバージョン1.1.0では、すべてのアイテムを選択するための "select"メソッドを呼び出すことができます：

あなたの場合は

：

$("#table1").bootgrid("select"); 

（。サーバー側のシナリオにのみロードされた項目が選択されている）

だから、これのために、あなたはJS-機能とHTML-ボタンを生成することがありました：

<button onclick="selectAllItems();">Select all loaded Items</button> 

function selectAllItems() 
{ 
    $("#table1").bootgrid("select"); 
} 

私はいくつかのページでそれをテストしました。ロードされたすべてのアイテムが選択され、前後に数ページ移動すると選択が保持されます。

私はbootgridの現在のバージョン使用しています：私はAJAXを経由して新しいページをロードしています新しいページに裏返した後、私の場合はV 1.3.1

を。ロードされたアイテムだけがチェックされる可能性があります。しかしチェックされたチェックボックスは、新しいページをロードした後も保持されます。

あなたが特定の項目をチェックしたい場合は、IDの配列を持つアイテムを選択することができます。たとえば

$("#table1").bootgrid("select", [rowIdsArray]); 

：bootgridのドキュメントで

$("#table1").bootgrid("select", [1,3,5,8,9]); 

、それは非常に明確ではありません、 「行ID」の意味。

私は、input-tagsにidがないので、それは "data-row-id"属性だと思います。クラスは1つしかありません。