【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)

上下左右按键

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

BUG1

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第1张图片

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第2张图片

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

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

 

BUG2

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

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第3张图片

 

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第4张图片

 

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

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第5张图片

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

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第6张图片

 

 

TAB键和ENTER键

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

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

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

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

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第7张图片

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第8张图片

 

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第9张图片

 

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

【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)_第10张图片

 

匠心品质,你值得拥有!

 

 

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

 

 

不忘初心,砥砺前行!

 

你可能感兴趣的:(【新特性速递】单元格导航(上下左右键,TAB键和ENTER键))