javascript - 使用DataTables扩展KeyTables行而不是单元格

我目前正在使用Bootstrap 4 beta / JQuery和Datatables以及扩展Select和KeyTables构建网页。 KeyTable允许使用箭头键浏览所有单元格。我只想浏览整行。那么可以将键表单元格导航转换为行导航吗？

这是带有Bootstrap 4的KeyTables中默认单元格导航中的Example

最佳答案

解

这可以通过限制KeyTable插件侦听的键并处理KeyTable生成的单元格焦点/模糊事件来完成。

var table = $('#example').DataTable({
    ajax: 'https://api.myjson.com/bins/qgcu',
    keys: {
       keys: [ 13 /* ENTER */, 38 /* UP */, 40 /* DOWN */ ]
    }
});

// Handle event when cell gains focus
$('#example').on('key-focus.dt', function(e, datatable, cell){
    // Select highlighted row
    $(table.row(cell.index().row).node()).addClass('selected');
});

// Handle event when cell looses focus
$('#example').on('key-blur.dt', function(e, datatable, cell){
    // Deselect highlighted row
    $(table.row(cell.index().row).node()).removeClass('selected');
});

// Handle key event that hasn't been handled by KeyTable
$('#example').on('key.dt', function(e, datatable, key, cell, originalEvent){
    // If ENTER key is pressed
    if(key === 13){
        // Get highlighted row data
        var data = table.row(cell.index().row).data();

        // FOR DEMONSTRATION ONLY
        $("#example-console").html(data.join(', '));
    }
});

需要额外的CSS规则来隐藏KeyTable插件使用的单元格突出显示。

演示

有关代码和演示，请参见this example。

链接

有关更多示例和详细信息，请参见jQuery DataTables: How to navigate rows with KeyTable plug-in。