结构树-【Ztree】自定义图标、增删改加拖拽

由于业务提个结构树编辑功能需求,起初用iview的树组件实现了节点的增删改功能,后期又新增修改父节点功能,因为对节点拖拽没有深入调研换去另一种方式实现如图:

虽然投机取巧实现了修改父节点功能,但业务方仍坚持用拖拽的方式来处理,没办法业务方的需求推不了,接下来开始调研结构树的js插件,发现zTree的功能与项目所需很契合,于是开始学习文档api文档 文档写的很详细,功能很全。

但是应用到项目中发现一个问题 就是图标UI风格比较淳朴 与现有项目UI不搭,查看源码是引用精灵图片,虽然这种方式能提高性能,但还是决定改用自定义图标来美化一下,各种百度、各种查询,都没有一种方案适合,后来发现开源项目堡垒机开源项目引用的zTree并实现了自定义图标,便在git上找到css文件才发现是在class类名下引用fonawesome字体,并没有直接使用zTree官方css文件,顺着这个思路,自定义图标得以实现。

在jumpserver项目发现将增删改功能放在右键菜单,并加了一些对节点其他属性的修改功能,便又借鉴这种交互方式进行功能优化,说了这么多直接上效果图 源码地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,696评论 4 61
  • 看过《西游记》的人很多不理解本来孙悟空学艺之后,一个筋斗就可以到达西天,但是在五指山下被唐僧救出之后,为什么却要步...
    嘻哈哲学阅读 4,477评论 0 0
  • 想起来之前看过的一个节目. 一个姑娘坐飞机时,对隔着过道的小伙子一见钟情,她爱上男子俊秀的相貌以及行为素质和符合她...
    少女芙阅读 3,199评论 1 3

友情链接更多精彩内容