禁用第一列DataTables中的行选择

Question

禁用第一列DataTables中的行选择

Has*_*asT 4 javascript jquery datatables

我有一个简单的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');

    //...

});

Run Code Online (Sandbox Code Playgroud)

HTML：

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

Run Code Online (Sandbox Code Playgroud)

如果未选择表中的行，然后单击第一列中的下拉按钮，则表中的行将变为可选状态。
当表中的行被选中并且我单击第一列中的下拉按钮时，表中的行将被取消选择

如何在选择表中的行时单击下拉按钮时避免“取消选择的行”的操作，而在未选择表中的行时单击下拉按钮时如何避免操作“选择的行”？或仅在第一列中禁用行选择

Answer 1

Gyr*_*com 5

使用以下代码：

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

    //...

});

Run Code Online (Sandbox Code Playgroud)

有关代码和演示，请参见更新的jsFiddle。

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

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

    //...

});

Run Code Online (Sandbox Code Playgroud)

有关代码和演示，请参见更新的jsFiddle。

归档时间：	9 年，10 月前
查看次数：	5703 次
最近记录：	8 年，5 月前