Question

在数据表上启用行选择时，是否可以限制用户可以选择的行数？我只希望用户能够在数据表中选择最多两行和最少一行，但我没有在Datatables API中看到描述如何执行此操作的选项？

我是否需要在用户选择行时触发的某些回调中手动执行此操作？如果可能的话，我想避免这种情况。任何帮助或见解都表示赞赏。

Answer 1

使用数据表示例：

$(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( );
} );

参考：select single row

Answer 2

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

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

//oldRow = first selected row from queue

var oTT = TableTools.fnGetInstance( 'MyDataTable' );
oTT.fnDeselect( oldRow );

Answer 3

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

无论如何，上述示例中最重要的部分 - 如果我们想部分重用它 - 是能够在 table.on( 'deselect', 功能尚未本地管理的情况下捕获事件。是哪种情况？ 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
    }
} );

Datatables jquery插件 - 限制可选行数

3 个答案: