Question

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

以下是来自KeyTables与Bootstrap 4的默认单元格导航中的Example

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以获取代码和演示。

LINKS

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

使用DataTables扩展KeyTables代替行而不是单元格

1 个答案:

解

样本

LINKS