我有一个简单的数据表 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": ' <i class="fa fa-cloud-download white"></i> 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> map file</a></li>' +
'<li><a href=' + trackurl + '><i class="fa fa-download"></i> 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>
- 当表格中的行未被选中时，我点击了第一列中的下拉按钮 - 表格中的行变为可选。
- And when row in table selected and I click on dropdown button in first column - row in table is becoming deselected
当我选择表中的行时单击下拉按钮时如何避免“取消选择行”的操作，以及当我未选择表中的行时单击下拉按钮时如何避免操作“选定的行”？或者仅在第一列禁用行选择
最佳答案
使用以下代码:
$('#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用于代码和演示。
关于javascript - 在第一列 DataTables 中禁用行选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36219977/