無効に行選択は

私はシンプルdatable https://jsfiddle.net/ptwgxpzu/27/無効に行選択は

JSを持っている：

var dataSet = [ 
    ["data/rennes/", "Rennes", "rennes.map"], 
    ["data/nantes/", "Nantes", "nantes.map"], 
    ["data/tours/", "Tours", "tours.map"], 
    ["data/bordeaux/", "Bordeaux", "bordeaux.map"], 
    ["data/limoges/", "Limoges", "limoges.map"], 
    ["data/troyes/", "Troyes", "troyes.map"] 
]; 


var table = $('#maptable').DataTable({ 
    "data": dataSet, 
    "paging": false, 
    "columns": [{ 
     title: "Download" 
    }, { 
     title: "Name" 
    }, { 
     title: "File Name" 
    }], 

    "columnDefs": [{ 
      "targets": [0], // Download 
      "visible": true, 
      "searchable": false, 
      "bSortable": false 
     }, { 
      "targets": [1], // Name 
      "visible": true, 
      "searchable": true 
     }, { 
      "targets": [2], // File name 
      "visible": true, 
      "searchable": true 
     }, 


    ], 
    "order": [ 
     [1, "asc"] 
    ], 
    "oLanguage": { 
     "sSearch": "" 
    }, 
    "aoColumns": [{ 
     "title": '&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-cloud-download white"></i>&nbsp;&nbsp;Download', 
     "render": function(data, type, full, meta) { 
      var url = 'http://localhost/'; 

      var mapurl = url + full[0] + full[2], 
       trackurl = url + full[0] + full[2].replace('map', 'trx'); 

      return '<div class="btn-group">' + 
       '<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' + 
       '<i class="fa fa-cloud-download white"></i> <span class="caret"></span>' + 
       '</button>' + 
       '<ul class="dropdown-menu">' + 
       '<li><a href=' + mapurl + '><i class="fa fa-download"></i>&nbsp;&nbsp;map file</a></li>' + 
       '<li><a href=' + trackurl + '><i class="fa fa-download"></i>&nbsp;&nbsp;track file</a></li>' + 
       '</ul>' + 
       '</div>'; 
     } 
    }, { 
     "title": "Name" 
    }, { 
     "title": "File name" 
    }] 

}); 


$('#maptable tbody').delegate('tr', 'click', function() { 
    $(this).toggleClass('selected'); 

    //... 

});

HTML：

<body> 
    <br /> 
    <div class="container"> 
     <table id="maptable" class="table table-bordered" width="100%"></table> 
    </div> 
</body>

テーブル内の行が選択されていないと私は上をクリックすると最初の列のドロップダウンボタン - テーブルの行が選択可能になっています。
とするとき、テーブル内の行を選択して、私は最初の列のドロップダウンボタンをクリックします - 行テーブル内のテーブル内の行を選択したとき、私はドロップダウンボタンをクリックすると、「選択解除行」の行動を避ける方法

を選択解除されつつありますテーブル内の行が選択されていないときにドロップダウンボタンをクリックすると、アクション '選択行'を避けることができますか？または唯一の最初の列の無効行選択

出典

2016-03-25 HasT

は、次のコードを使用します。

$('#maptable tbody').on('click', 'td:not(:first-child)', function() { 
    $(this).closest('tr').toggleClass('selected'); 

    //... 

});

をコードし、デモンストレーションのためにupdated jsFiddleを参照してください。また

、次のコードを使用し、その後、（ボタンがクリックされたときを除いて）最初の列に選択を許可したい場合：

$('#maptable tbody').on('click', 'tr', function (e) { 
    if(!$(e.target).is('button')){ 
     $(this).toggleClass('selected'); 
    } 

    //... 

});

は、コードとデモのためupdated jsFiddleを参照してください。

出典

2016-03-25 13:47:30

DataTablesで行を選択すると、select拡張が使用されます。

$('#yourTableId').DataTable({ 
    select: true 
});

選択できる列を完全に制御する場合は、select.selectorを使用してください。

$('#yourTableId').DataTable({ 
    select: { 
     selector:'td:not(:first-child)', 
     style: 'os' 
    } 
});

例えば、あなたのテーブルを定義するときに、余分な空<th>要素を必ず含めてください：

ここ

<table id="yourTableId" class="display"> 
    <thead> 
    <tr> 
     <th></th> 
     @foreach(string column in Model.columns) { 
      <th>@column</th> 
     } 
    </tr> 
    </thead> 
    <tfoot> 
    <tr> 
     <th></th> 
     @foreach(string column in Model.columns) { 
      <th>@column</th> 
     } 
    </tr> 
    </tfoot> 
</table>

私はMicrosoft Razorを使用してこの問題のために、最初の列が選択された場合、使用が選択イベントを無視（@foreach）、プラットフォームに関係なく、<tr>の直後に<th></th>があります。

出典

2017-08-03 22:22:10

答えて

関連する問題