0

私のページには、「すべて選択」と「すべて選択解除」の 2 つのボタンがあります。[すべて選択] ボタンをクリックしてすべての行を選択し、ID のリストを変数に保存する必要があります。deselect ll ボタンをクリックすると、すべての行の選択が解除されます。どうやってそれをしますか？

     [HttpPost]
            public ActionResult Action Name(pssing value)
            {
                DataTable dataTable = new DataTable();

            // my code
                var MyModel = new List<List<string>>();

                foreach (var joblist in Jobs)
                {
                    var sublist = new List<string>();
                    sublist.Add(checked.false);
                    sublist.Add(values));
                    sublist.Add(values));
                    ....etc 

                    baseModel.Add(sublist);
                }

                return new DataTableResult(return);
            }

HTML :

<table  cellpadding="0" cellspacing="0" border="0" class="display" id="AssignJobsTable" width="100%">
    <thead>
        <tr>
            <th><input type="checkbox" id="selectall"/></th>
            <th>ID</th>
          etc ......
        </tr>
    </thead>

脚本：

$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});

すべて選択チェックボックスをクリックすると、コントローラーから値をバインドできません。

4

4 に答える 4

0

サンプルテーブル

<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>

</table>

サンプルスクリプト：

$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});
于 2013-03-05T06:42:49.637 に答える
0

これを試して

 $('table#tableId> tbody > tr').addClass('highlight');

 $('table#tableId> tbody > tr').removeClass('highlight')addClass('noHeilight');
于 2013-03-05T06:41:41.057 に答える
0

これは、データテーブルで選択したすべての行を追跡する私のアプローチです。

http://www.datatables.net/release-datatables/examples/plug-ins/plugin_api.html

アイデアは、ユーザーがいる現在のページを確認し、現在表示されている行を選択/選択解除することです。ページの行をループして、選択した行を後で参照できるように配列に格納します。

このアプローチを使用すると、テーブル内のすべての行を選択/選択解除するのにかかる時間を制限できます。

ユーザーが見ているビューに基づいて、必要なものだけを表示します。

テーブルが各行のチェック/チェック解除でビジー状態であるため、ハングアップすることはありません。

//stored checked box list
var result = [];
var selectAll = false;

var table5 = $('#example5').dataTable({
   'fnDrawCallback':function(oSettings){

     var anNodes = this.oApi._fnGetTrNodes( oSettings );
 var anDisplay = $('tbody tr', oSettings.nTable);

     //write your logic for pagination 
     //example 
     /*
     $('tbody tr td:first-child input[type=checkbox]').on('click', function(){
       if($(this).is(':checked')){
         if($.inArray(....) != -1){push result}
       }else{
         if($.inArray(....) != -1){splice result}
       }
     }
     if(selectAll){
        for(var i = 0; i < anDisplay.length; i++){
          //check if it's in result array 
          //add to the array
        }
     }else{
        for(var i = 0; i < anDisplay.length; i++){
          //check if it's in result array 
          //delete from the array
        }
     }
     */
   }
})

これは、チェックされた行を追跡するためのロジックになります。

于 2013-05-08T16:55:08.770 に答える
0

チェックボックスに id 属性を設定し、行 ID を id 属性に入れ、以下のコードを使用して選択および選択解除する必要があります。

$(document).ready(function(){

$("#selectall").click(function () {

      var isSelect;
      if($(this).is(":checked")) {
        isSelect=true;
      }else{
        isSelect=false;   
      }

      $("table tr td input[type=checkbox]").each(function(){

          if(isSelect) {
            $(this).prop('checked', true);

            SelectedItems+=$(this).val()+":";
          }else{
            $(this).prop('checked', false);
            SelectedItems="";
          } 
          $("#Result").html(SelectedItems);

      });          
});

});

于 2013-03-05T10:26:14.593 に答える