由于业务提个结构树编辑功能需求,起初用iview的树组件实现了节点的增删改功能,后期又新增修改父节点功能,因为对节点拖拽没有深入调研换去另一种方式实现如图:
虽然投机取巧实现了修改父节点功能,但业务方仍坚持用拖拽的方式来处理,没办法业务方的需求推不了,接下来开始调研结构树的js插件,发现zTree的功能与项目所需很契合,于是开始学习文档api文档 文档写的很详细,功能很全。
但是应用到项目中发现一个问题 就是图标UI风格比较淳朴 与现有项目UI不搭,查看源码是引用精灵图片,虽然这种方式能提高性能,但还是决定改用自定义图标来美化一下,各种百度、各种查询,都没有一种方案适合,后来发现开源项目堡垒机开源项目引用的zTree并实现了自定义图标,便在git上找到css文件才发现是在class类名下引用fonawesome字体,并没有直接使用zTree官方css文件,顺着这个思路,自定义图标得以实现。
在jumpserver项目发现将增删改功能放在右键菜单,并加了一些对节点其他属性的修改功能,便又借鉴这种交互方式进行功能优化,说了这么多直接上效果图 源码地址