我有一个简单的可数据化的表格: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>
当表格中的行未被选择且我点击第一列的下拉按钮时,表格中的行将变为可选择状态。当表格中的行已被选择且我点击第一列的下拉按钮时,表格中的行将取消选择。
如何避免在表格中选择行的情况下单击下拉按钮时出现“取消选择行”的操作,并避免在表格中未选择行的情况下单击下拉按钮时出现“选择行”的操作?或仅在第一列中禁用行选择。