Datatablesjquery插件-限制可选择的行数

Datatables jquery plugin - limit number of selectable rows

本文关键字：可选择 插件 Datatablesjquery      更新时间：2023-09-26

在数据表上启用行选择时，有没有办法限制用户可以选择的行数？我只希望用户能够在数据表中选择最多两行和最少一行，但我在数据表API中看不到描述如何做到这一点的选项？

我是否需要在每当用户选择一行时触发的回调中手动执行此操作？如果可能的话，我想避免这种情况。如有任何帮助或见解，我们将不胜感激。

使用数据表示例：

$(document).ready(function() {
    /* Add a click handler to the rows - this could be used as a callback */
    $("#example tbody tr").click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        // the following line do what you want
        else if(oTable.$('tr.row_selected').length < 2) {
            $(this).addClass('row_selected');
        }
    });
    /* Add a click handler for the delete row */
    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        if ( anSelected.length !== 0 ) {
            oTable.fnDeleteRow( anSelected[0] );
        }
    } );
    /* Init the table */
    oTable = $('#example').dataTable( );
} );

参考：选择单行

Ok让一个实现工作起来了，所以我最终做的不是限制用户可以选择的行数，而是添加了一些逻辑，每当用户点击另一行时，取消选择之前选择的任何行。我将选择顺序视为一个队列，这是我刚刚使用数组实现的，每次我将新行推送到队列时，任何以前的元素都会弹出。

队列的大小决定了用户可以选择的行数，通过将队列大小设置为两行，最多可以选择两行，当选择另一行时，将从队列中删除第一行。我使用下面的fnGetInstance（）和fnDeselect（）函数从我的数据表实例中取消选择行

//oldRow = first selected row from queue
var oTT = TableTools.fnGetInstance( 'MyDataTable' );
oTT.fnDeselect( oldRow );

正如在另一个答案中已经指出的，DataTables中有一个单行选择示例，但不幸的是，它并不完全可用且令人信服。从代码中可以明显看出，他们的解决方案是包外部的，但从测试经验中也可以看出，原生选择计数没有更新（这并不好）。

无论如何，如果我们想部分重用上述示例，那么它最重要的部分就是在table.on( 'deselect', feauture尚未本地管理的情况下捕获事件的能力。是哪种情况？Ctrl+click，通过它可以选择多个项目。因此，新的解决方案结构将是

table.on( 'click', 'tr', function () {
    // https://stackoverflow.com/a/42266749/11323942
    if ( event.ctrlKey ) {
        //is ctrl + click
        console.log("ctrl + click intercepted but forcing single select")
        // NOW WHAT TO DO?
    }
} );

现在最好的做法是将控制权交还给他们框架的标准事件。所以

// NOW WHAT TO DO?
table.rows({ selected: true }).deselect();

以上将选择限制为一行，但很容易扩展到不同数量的行，当然现在您可以以适当的方式执行任何重置操作

table.on( 'deselect', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var deselectedrow = indexes[0]
        console.log('deselected row', deselectedrow);
        // perform whatever reset action you might need
    }
} );
相关文章：