[] Express the cell's new navigation (arrow keys, TAB and ENTER keys)

Up and down left and right buttons

In fact, a cell navigation (up and down buttons, you need to enable forms ShowSelectedCell property) has always been there, just before the release (v5.5.0) there are some small BUG.

BUG1

When such column lock exists, arrow keys, or only in the main table navigation lock table may see Example: https://pro.fineui.com/#/grid/grid_lockcolumn_editor_cell_new.aspx

The new version (v5.6.0) will fix this problem, use the left and right keys to navigate, naturally across the table from locking into the main form, it will not be limited within a certain form:

As well as a previous version and inconsistent place, when a new version (v5.6.0) of the left and right keys to navigate, if pressing the right button at the right-most cell, there is no reaction (the old version will be transferred to the next line).

Similarly, the arrow keys navigate a new version (V5.6.0), if the key is pressed down in the bottom cell, but also did not respond (is not transferred to the next column), so that more uniform.

 

BUG2

Another BUG present in tree form, as some hidden node, it will be selected when the hidden rows up and down buttons, the interface so that there would be no effect of a selected test example:

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

 

The new version (v5.6.0) to achieve this effect will be more complicated, because we reconstructed in the new version of the DOM tree form instead nested structure TR-TD-TABLE from single-TR, so ultimately all kinds of recursion, However, we still achieve this effect:

 

Actually, the most complex implementation than the lock case columns and tree forms exist, we deliberately wrote a test example of this situation:

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

Kazakhstan looks simple, in fact, the internal logic of a little more complicated, involving around two tables, each table inside another table 2-3 layers of nesting.

我们对此进行了深入思考,并公开了 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的基础版

 

 

不忘初心,砥砺前行!

 

Guess you like

Origin www.cnblogs.com/sanshi/p/11291635.html