二叉树--实现可编辑的树形table

    最近迭代里边有个需求刚好可以利用之前学过的树结构来做,人生为数不多的"学以致用"让我很是激动。现简单记录下该需求,也算是对树知识一次比较完整的复习与实战

需求如下

        打开弹窗默认显示一行,该行有新增子级操作,这其实相当于是二叉树的根节点;点击新增子级则新增第二第三行。除了第一行以外,都有新增子级和新增同级按钮,新增子级则向下新增,这相当于是先左子树顺着右子树一直衔接。新增同级则需要向右子树方向衔接

需要注意的点

    由树转为的二叉树的根节点是没有右子树的,因此对于根节点的新增以及第一个子节点的新增是需要单独判断的

    默认由二叉树转为树后的顺序是不对的,因此需要每次转换的过程中进行下排序,我这里在内部维护了id每次++,故将根据id的大小进行升序排列

左侧树形结构

    由于产品的"特立独行",看不上antd的树形方式,需要实现当前效果

    操作列通过组件内维护的每行的paddingLeft值手动调整宽度,并在每次新增或删除后更新columns

        操作列的宽度我并没有选择每次都动态的去计算,而是一开始就直接生成了100层的宽度,这蛮够实际需要了

        配合antd提供的rowClassName属性为每一列添加缩进标识

            利用less生成100个对应的缩进样式

增删改查

        框红的部分分别对应树节点的增删,这里我利用前序遍历查找节点,并在找到对应节点时执行对应操作

        新增

         删除

(删除的情况比较多,大致是如图5种)

        "改"操作则在每一行的值被修改时执行

        对应树中,找到对应的id后只需要替换data即可

        页面效果如下

树的完整数据结构

        create函数

        preorderTraverse函数

        toBiTree函数

        toTree函数

        process函数

        unProcess函数


2021-9-13更新

    后续提测过程中有需求变动或bug,记录如下

    删除时存在某个子树被整体删除的情况

(先删除子后删除父)

    请求接口时使用层序遍历格式化下参数

      父节点记录不准确

        计算最大层号并据此生成操作列宽度

        数据的格式化处理

        使用antd本身的层号类名生成缩进样式

你可能感兴趣的:(二叉树--实现可编辑的树形table)