API 集成

KeyTable 提供的主要界面是最终用户可用的简单单元格聚焦选项，但它呈现给你们（与之合作的开发者）的界面同样重要！KeyTable 提供了聚焦单元格的方法，获取焦点单元格以及单元格聚焦发生变化的事件。

这是通过 DataTables API 完成的，KeyTable 扩展了它以使这些操作成为可能。

焦点单元格检索

KeyTable 通过 focused 选项增强了 selector-modifier 选项，该选项可用于告知单元格选择器 API 方法你想要获取焦点单元格、未聚焦单元格还是在选择单元格时不考虑单元格焦点。

DataTables 有两种单元格选择方法

cells() 以获取多个单元格
cell() 以获取单个单元格。

由于在 KeyTable 控制的表格中只有一个单元格可以具有焦点，因此 cell() 方法是与 KeyTable 配合使用的主要方法。

将 selector-modifier 传入该方法，它将影响单元格选择器将从中选择的项。例如，考虑以下内容

var table = $('#myTable').DataTable();

table.cell( { focused: true } ).data();

上述代码将获取当前具有焦点的单元格中的数据。如果没有单元格具有焦点，则返回 undefined。

如果我们要获取没有焦点的单元格，我们可以使用

table.cells( { focused: false } ).data();

这种使用选择器修饰符允许单元格选择的方法意味着所有单元格方法都可以轻松地与焦点单元格一起使用 - 例如 cell().node() 和 cell().invalidate() 等。

焦点选择

除了能够使用 DataTables API 获取焦点单元格外，还可以使用 API 设置焦点并模糊现有焦点。这是使用以下方法完成的

cell().focus() - 获得焦点
cell.blur() - 模糊焦点

例如，要聚焦具有特定 ID 的单元格，我们可以使用

table.cell( '#row9-column12' ).focus();

事件

难题的最后一个部分是要知道单元格何时聚焦。这是通过 KeyTable 发出的事件完成的，具体来说是 key-focus、key-blur 和 key 事件。可以使用标准的 DataTables 事件模型监听这些事件。

例如，考虑以下简单情况，其中 key-focus 和 key-blur 事件仅用于在页面上单独的元素中显示聚焦单元格的数据

var output = $('#output');
var table = $('#myTable').DataTable( {
    keys: true
} );

table
    .on( 'key-focus', function () {
        var data = table.cell( { focused: true } ).data();
        output.html( data );
    } )
    .on( 'key-blur', function () {
        output.html( 'No cell has focus' );
    } );