【新特性速遞】樹表格結構由單層 TR 改成 TR-TD-TABLE 層級嵌套！

因爲歷史緣由，在以前實現樹表格時，咱們有點偷懶，原本應該是層級嵌套的樹結構，被咱們硬生生的拉平了，請看：

 

能夠看到，basic目錄的子節點和basic是在同一級別的，由於此目錄還沒有展開，因此這些子節點被標識爲隱藏（f-hidden）。

 

這樣作的好處，就是處理方便，由於能夠沿用以前表格的一套邏輯代碼。

但終究是不夠優雅，並且遇到子節點比較多的狀況，摺疊展開就是顯示隱藏一大堆節點，怎麼都給人很low的感受。

 

這不，咱們一直惦記着這個事情，來看下下個版本（v5.6.0）的樹表格DOM結構：

能夠看出，子節點被包含在一個 f-grid-treegroup 的節點中，這時再摺疊展開目錄只須要改變一個節點的樣式類便可了！

 

結構看着很清楚，可是實現起來就麻煩多了，由於和表格默認的平面TR不一樣，這裏涉及到嵌套，並且這個嵌套可能就不是一級了，好比：

這裏的 common.css 節點就被嵌套在兩個 table.f-grid-table，所以咱們的代碼要Cover這些邏輯少不了一些遞歸了。

 

更重要的是，打破了單層 TR 的侷限，之後咱們能夠給表格增長更豐富的功能！

 

此次的樹表格重構，也算是爲更美好的將來打下堅實基礎，但願你能喜歡此次的更新！

 

 

 

加入知識星球下載FineUIPro/Mvc/Core的基礎版！

 

 

不忘初心，砥礪前行！