【新特性速递】单元格导航（上下左右键，TAB键和ENTER键）

上下左右按键

其实单元格导航（上下左右按键，需要启用表格的ShowSelectedCell属性）一直都存在，只不过之前的版本（v5.5.0）有一些小的BUG。

BUG1

比如锁定列存在时，上下左右键只能在锁定表格或者主表格导航，可以看示例：https://pro.fineui.com/#/grid/grid_lockcolumn_editor_cell_new.aspx

新版本（v5.6.0）会修正这个问题，使用左右键导航时，会从锁定表格自然跨到主表格，不会局限于某个表格内：

同时还有一个和之前版本不一致的地方，新版本（v5.6.0）中左右键导航时，如果在最右侧单元格按下右键，是没有反应的（老版本会调到下一行）。

同样，新版本（v5.6.0）中上下键导航时，如果在最下方单元格按下向下按键，也是没反应（不会调到下一列），这样就比较统一。

BUG2

另一个BUG存在于树表格，由于部分节点隐藏，所以上下左右按键时会选中隐藏的行，这样界面上就没有任何选中的效果了，测试示例：

新版本（v5.6.0）实现这个效果会更复杂，因为我们在新版本重构了树表格的DOM结构，从单层 TR 改为 TR-TD-TABLE 的嵌套结构，所以少不了各种递归，不过我们还是实现了这个效果：

其实最复杂的实现莫过于锁定列和树表格同时存在的情况，我们特意写了个示例测试这种情况：

看起来很简单哈，其实内部的逻辑有点复杂，涉及左右两个表格，每个表格里面又有2-3层的表格嵌套。

我们对此进行了深入思考，并公开了 4 个客户端函数，方便网友自行扩展，它们是：getNextRowEl, getPrevRowEl, getNextCellEl, getPrevCellEl

既然上下左右键用来在单元格之间导航，那么TAB键和ENTER键又用来做什么呢？很多网友可能会被搞晕掉，其实很简单：

1. 上下左右键用于在单元格之间导航，需要启用ShowSelectedCell或者启用单元格编辑（非编辑状态）

2. TAB键和ENTER键仅用于单元格编辑，用来在单元格编辑之间快速切换

看下这个示例的TAB键导航情况：

很多网友不知道，如果你按下 Shift+Tab 键，就会反方向切换单元格，看下效果：

同时，我们还支持上下方向导航，只需要启用 TabVerticalNavigate="true" 属性即可，此时的TAB导航效果：

除了TAB键，还可以让 ENTER 键实现单元格编辑的快速导航，这些规则都记录在在线示例中，可以自行查询：

匠心品质，你值得拥有！

不忘初心，砥砺前行！

posted @ 2019-08-08 08:59 三生石上(FineUI控件) 阅读(1315) 评论(0) 编辑收藏举报

刷新页面返回顶部