zoukankan      html  css  js  c++  java
  • 【新特性速递】树表格结构由单层 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的基础版

    不忘初心,砥砺前行!

  • 相关阅读:
    p1012拼数题解
    LeetCode OJ :Unique Binary Search Trees II(唯一二叉搜索树)
    UVA 11827 Maximum GCD
    LightOJ1336 Sigma Function(约数和为偶数的个数)
    LightOJ 1197 Help Hanzo(区间素数筛选)
    LightOJ 1236
    BZOJ3339 Rmq Problem
    COJ983 WZJ的数据结构(负十七)
    LCA的五种解法
    hdu4223(dp)
  • 原文地址:https://www.cnblogs.com/sanshi/p/11291478.html
Copyright © 2011-2022 走看看