上下左右按鍵
其實單元格導航(上下左右按鍵,需要啟用表格的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的基礎版!
不忘初心,砥礪前行!