写了一个树状图插件

Posted huanglei-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了写了一个树状图插件相关的知识,希望对你有一定的参考价值。

由于公司还有用jquery的项目,没法直接用antd之类的高质量组件,其他的jquery插件样式又太古老,于是自己动手写一个吧。

先上成果,样式交互基本按照antd,原生js开发,不依赖jquery.
技术分享图片
技术分享图片

思路: 根据title属性生成树节点,再根据children属性递归生成其子节点
技术分享图片

在创建树节点之前,根据data属性生成一颗“虚拟树”,将每个节点和其parent和children连接起来,然后当点击checkbox的时候,就在parent和children链上传递事件,每个节点收到事件后只处理自己节点的状态,这样就实现了多层级之间的解耦,并且扩展属性和方法也更加方便。
技术分享图片

当点击checkbox的时候,除了处理各节点的样式,还将该节点(如果是叶子节点)的数据添加到一个Map数据结构,当取消点击的时候又从这个Map中将该数据删除,在获取所有已选择的节点时就直接从这个Map中获取数据,而不需要去遍历树节点再判断哪些被选中。

技术分享图片
技术分享图片

虽然功能没有像zTree那样丰富,但是大多数情况已经够用了。而且扩展功能方便,样式也更加modern, 有需要用到tree组件的同学可以尝试一下, 有什么需求也可以提,我会不断完善其功能。 如果需要二次开发也很方便,项目提供了webpack开发模式和打包功能。

说了这么多,其实就是想要一个star啦- -vtree






以上是关于写了一个树状图插件的主要内容,如果未能解决你的问题,请参考以下文章

onenote怎么画树状图

使用treeview.js插件生成树状菜单方法的简单介绍(附通过json字符串生成菜单的代码)

它';这是一个简单直接的组织结构图插件。任何时候你想要一个树状图表,你都可以转到组织结构图。

wordpress插件multiple-post-thumbnails实现多缩略图教程

Vim树状目录插件NERDTree安装和使用

element树状图懒加载