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

Question

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

这是一个 Example来自带有 Bootstrap 4 的 KeyTables 的默认单元格导航

Answer 1

解决方案

这可以通过限制 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有关更多示例和详细信息。