【新特性速递】树表格结构由单层 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的基础版！

 

 

不忘初心，砥砺前行！