【新特性速递】单元格导航（上下左右键，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存在于树表格，因为部分节点隐藏，因此上下左右按键时会选中隐藏的行，这样界面上就没有任何选中的效果了，测试示例：

https://pro.fineui.com/#/gridtree/gridtree_celleditor.aspx

 

新版本（v5.6.0）实现这个效果会更复杂，由于咱们在新版本重构了树表格的DOM结构，从单层 TR 改成 TR-TD-TABLE 的嵌套结构，因此少不了各类递归，不过咱们仍是实现了这个效果：

 

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

https://pro.fineui.com/#/gridtree/gridtree_celleditor_lockcolumn.aspx

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

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

 

 

TAB键和ENTER键

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

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

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

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

https://pro.fineui.com/#/gridtree/gridtree_celleditor_lockcolumn.aspx

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

 

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

 

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

 

匠心品质，你值得拥有！

 

 

加入知识星球下载FineUIPro/Mvc/Core的基础版！

 

 

不忘初心，砥砺前行！