0

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

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

4

3 回答 3

0

使用数据表示例：

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

参考：选择单行

于 2012-08-03T19:34:32.863 回答
0

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

The size of the queue determines the number of rows a user can select, by setting the queue size to two, this allows up to two rows to be selected, when an additional row is selected, the first selected row is removed from the queue. 我使用下面的 fnGetInstance() 和 fnDeselect() 函数从我的数据表实例中取消选择行

//oldRow = first selected row from queue

var oTT = TableTools.fnGetInstance( 'MyDataTable' );
oTT.fnDeselect( oldRow );
于 2012-08-14T23:01:29.813 回答
0

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

无论如何，上述示例中最重要的部分 - 如果我们想部分重用它 - 是在功能尚未本地管理的情况下捕获事件的能力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
    }
} );
于 2021-01-27T15:05:45.510 回答