【新特性速遞】單元格導航（上下左右鍵，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的基礎版！

 

 

不忘初心，砥礪前行！