如何启用选项卡导航到不同行组中的下一个可编辑单元格?

时间:2016-04-20 14:23:22

标签: ag-grid

我使用ag-grid enterprise 4.0.7构建应用程序,该应用程序使用行组并具有可编辑字段,可编辑单元格之间的键盘导航至关重要。

内置选项卡导航效果很好,但仅限于行组。一旦到达组中的最后一个可编辑单元格,按Tab键不会跳转到下一组中的下一个可编辑单元格,而是跳转到页面上某些不相关的元素。

以下是基于ag-grid文档样本的示例,运动员'名称是可编辑的,标签导航到下一个运动员,但仅限于一个国家/地区:https://jsfiddle.net/pfhkf3bm/

field: "athlete",
editable: true

这是预期的行为吗?什么是扩展标签导航以跳转到另一个组中下一个可编辑项目的最简洁方法?

谢谢!

1 个答案:

答案 0 :(得分:1)

这种方法对我有用:

myTabToNextCell(params) {
    const previousCell = params.previousCellDef;
    const lastRowIndex = previousCell.rowIndex;
    let nextRowIndex = lastRowIndex + 1;
    // TODO renderedRowCount must contain the row count.
    const renderedRowCount = this.state.rowCount;

    // if (nextRowIndex >= renderedRowCount) { nextRowIndex = 0; }
    if (nextRowIndex < renderedRowCount) { nextRowIndex = lastRowIndex + 1; }       else {
        nextRowIndex = 0;
    }

    const result = {
        rowIndex: nextRowIndex,
        column: previousCell.column,
        floating: previousCell.floating
    };

    return result;
}