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

 

 

不忘初心,砥礪前行!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM