logo标签列表

在DataTables中禁用第一列的行选择

javascriptjquerydatatables
4
我有一个简单的可数据化的表格：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>

当表格中的行未被选择且我点击第一列的下拉按钮时，表格中的行将变为可选择状态。当表格中的行已被选择且我点击第一列的下拉按钮时，表格中的行将取消选择。
如何避免在表格中选择行的情况下单击下拉按钮时出现“取消选择行”的操作，并避免在表格中未选择行的情况下单击下拉按钮时出现“选择行”的操作？或仅在第一列中禁用行选择。
2个回答
7
使用以下代码：
$('#maptable tbody').on('click', 'td:not(:first-child)', function () {
    $(this).closest('tr').toggleClass('selected');

    //...

});

请参见更新的jsFiddle以获取代码和演示。

或者，如果您想允许在第一列中进行选择（除了单击按钮时），则使用以下代码：

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

    //...

});

请查看更新的jsFiddle获取代码和演示。

2
在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>。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接