react 自定义树(组织架构)

我的原型图长这样,我的第一想法是使用antd提供的tree组件,但是发现似乎没法定义右侧的内容

我的数据结构长这样

渲染出基本结构

        定义组件,接收source数据,并递归的将source拍平

        使用ul+li结构渲染出基本结构

        对于长短不一的子级架构,使用css样式调整,对应数据源中的level

        效果如下

树展开与收起的处理

        向li添加绑定事件

                "level-"+v.level将作为后续dom操作时的标识

                class为arrow的span元素则是箭头,将在用户点击后rotate切换

        处理展开收起、箭头切换

                    如果level为4,则为最后一级,不需要处理

                    isHide是隐藏后打上的flag,将据此进行操作切换

                    通过$(ev.target).nextAll()拿到从自己开始向后所有的兄弟元素,如果找到了同级的level,则不再向下执行操作。因为我们只需要处理当前level下的子level即可

右侧操作按钮

        从图中可以看出,共存的是修改和查看按钮,4级节点没有新增,1级节点没有删除,故代码如下

你可能感兴趣的:(react 自定义树(组织架构))