Question

我有一个简单的数据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>

当未选择表格中的行时，我点击第一列中的下拉按钮 - 表格中的行正在变为可选择。
当选择表格中的行并点击第一列中的下拉按钮时 - 表格中的行将被取消选择

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

Answer 1

使用以下代码：

botocore.exceptions.ClientError: An error occurred (InvalidParameterValueException) when calling the UploadArchive operation: Invalid Content-Length: 0

请参阅updated jsFiddle以获取代码和演示。

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

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

    //...

});

请参阅updated jsFiddle以获取代码和演示。

Answer 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），但无论您的平台如何，请在<th></th>之后注意<tr>。

禁用第一列DataTables中的行选择

2 个答案: