写了一个树状图插件

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

先上成果，样式交互基本按照antd，原生js开发，不依赖jquery.

思路： 根据title属性生成树节点，再根据children属性递归生成其子节点

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

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

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

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

原文地址：https://www.cnblogs.com/huanglei-/p/8716584.html

时间： 2024-10-20 12:37:01

写了一个树状图插件的相关文章

一款很好用的JQuery dtree树状图插件

一款很好用的JQuery dtree树状图插件 树状图  -dtree 由于他的节点设置思想不错,使连接数据库的数据库设计比较方便. 下载dtree资源包,引用一下dtree.css和dtree.js文件,然后编写节点就行了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

D3树状图给指定特性的边特别显示颜色

D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白的可以再去研究下. 本篇博文,同样是在这个框架下,完成修改树状图中某两个节点之间的边用红色线条连接,实现表达特殊含义的目的. 背景故事: 微信朋友圈之间产品帖子相互转发,有些帖子转发后会有成交,只要有成交,则这个促成成交的节点及其之上的父节点都相应是有功劳的,这个轨迹需要用高亮的颜色表示(比如本例中

bzoj 4871: [Shoi2017]摧毁“树状图”

4871: [Shoi2017]摧毁“树状图” Time Limit: 25 Sec  Memory Limit: 512 MBSubmit: 53  Solved: 9[Submit][Status][Discuss] Description 自从上次神刀手帮助蚯蚓国增添了上千万人口(蚯口?),蚯蚓国发展得越来越繁荣了!最近,他们在地下发现了 一些神奇的纸张,经过仔细研究,居然是D国X市的超级计算机设计图纸!这台计算机叫做‘树状图’,由n个计算 节点与n1条可以双向通信的网线连接而成,所有计算

D3树状图异步按需加载数据

D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但是,这里的异步加载,指的是一次性的将图形展示所需要的数据异步的方式加载到浏览器前端显示.主要有如下这两种方式: 1 d3.csv(url[[, row], callback]) 2 3 Creates a request for the CSV file at the specified url w

ArcGIS教程：树状图

摘要 构造可显示特征文件中连续合并类之间的属性距离的树示意图(树状图). 用法 · 输入特征文件必须采用预定的特征文件格式.特征文件可使用 Iso 聚类或创建特征工具来创建.该文件必须至少包含两个类.可通过扩展名 .gsg 来识别特征文件. · 树状图的输出是一个 ASCII 文本文件.该文件包含两部分:表和图形. 第一部分是以合并顺序显示各类对之间距离的表.第二部分是使用类的 ASCII 字符的图形表达,用来演示合并关系和等级.图形说明了特征文件中合并类对之间的相对距离,这些距离均基于统计得到

highcharts+jsp+springDataJpa实现饼状图，树状图

1.饼状图 1. 创建spirngboot项目,引入以下启动器. <!-- servlet 依赖. --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <scope>provided</scope> </dependency> <!-- jstl依赖. --&g

自己写了一个无缝滚动的插件(jQuery)

效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img src="img/f1.jpg" alt="f1"/></li> 4 <li><img src="img/f2.jpg" alt="f2"/></li> 5 <li&g

JavaScript+svg绘制的一个饼状图

svg参考:https://www.w3.org/TR/SVG/ <body onload='document.body.appendChild( pieChart([12,23,34,45],640,400,200,200,150, ["red","blue","yellow","green"], ["North","South","East","W

Android开源图表之树状图和饼状图的官方示例的整理

最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Eclipse版本的类库.(有需要要的留下邮箱) 这就是Code中的效果(树状图) 1 public class BarChartActivity extends Activity implements OnChartValueSelectedListener{ 2 3 private BarChart m