个人前端工具集(四)树状结构前篇
个人前端工具集(四)树状结构前篇html
liuyuhang原创，未经容许禁止转载前端
目录node
个人前端工具集数据库
一、什么是树状结构浏览器
树状结构，指的是由根，和叶组成的结构。服务器
咱们通常看的文件夹关系，就是树状结构。打开一个文件夹，其中能够有多个文件夹。数据结构
树状结构的路径可以向下扩展，同时可以向上溯源。工具
在树状结构分叉的地方，叫作节点（node）。post
对于每一个节点分叉数量相同的树，叫作X叉树，如每一个节点分为2叉的树叫作二叉树。this
同理也有3叉树N叉树。
2叉树是一种比较标准规范的数据结构了，之后会写相关内容！
本文说的树，指的是在前端视图上要展现的树状结构，并不是指数据结构！
贴几张树状结构的可视效果：
2.树状结构的特色
树状结构都要知足必定的特色的，这些特色让这个树的功能给定！
2.1.惟一根节点（ROOT）
每一个树形结构都应该有惟一的根节点，在向上追溯的时候，整个树状结构是根据从该节点开始的。
2.2.可闭合可展开
树形结构的节点通常都包括开闭功能，表现符号多为用+或-表示，也有用node或leaf表示的。
树在加载完毕之后，也有两种表现形式，即默认关闭节点，默认展开节点。
介于这两种形式之间的形式，就是默认展开部分节点，能够用某个参数来设定，好比默认展开三级节点。
2.3.有惟一id构成
树的每个节点，便可以表示信息点（leaf），同时也能够表示是信息节点（node）。
区别在于，信息点是包含信息，而不包含子信息的。
信息节点能够包含信息，也是容许包含子信息的。
通常来说，相似于文件与文件夹的关系。
在天然环境中，一个树叶长出的地方，咱们叫作叶芽，即该芽长出的是一片叶子（信息）。
同时，叶芽在第二年，可能就生长成了一个枝芽（节点），枝芽中包含一个分支，该分支上可能长出多个叶芽。
所以，不论是信息点（leaf），仍是信息节点（node），都是有一个标记的，该标记即id，固然能够用其余的key来表示。
可是要肯定的是，该id应有惟一的value来表示，即有惟一id表示其身份。
2.4.有pid指定其隶属节点
若是按照天然顺序直接展现，那就是个list，而并不是是树结构了。
将正确的id标记的信息点（leaf）挂载在正确的信息节点（node）下，须要一个方式去识别，该识别方式即一个引用。
由于每一个信息节点（node）下能够挂载多个信息点（leaf），因此，须要有一个key表示value等同于信息节点（node）的id。
多数状况下，你们采用pid的手段，即parentId的缩写。实际意义是this info‘s parent id is xxx的意思。
即leaf的pid=node的id的时候，表示该leaf挂载在该node下。
pid并非惟一标识，可是为了表示树形结构，该key应该存在。
2.5.每一叉上都有相应的Info信息
若是每个信息点（leaf）或信息节点（node）都只有id和pid，这个树就太空荡荡了，它须要一些信息，多是：
文字信息；
某种功能按钮；
某种绑定事件；
2.6.组织形式多样化
常见的系统中，树状结构是竖着展现的。而在不少组织结构图中，树状结构是横向展现的。
除此以外，以相似离散图形式展现的，也能够称为树，好比脑图。
不该该将树的组织形式惟一化，虽然竖向的树状图最为常见，也展现起来最为便利。
三、树状结构解决了什么需求
有了list的展现形式，为何还须要树来展现信息？
list的展现形式分为有序和无序两种，两种形式中，list中的各个元素都是没有级别之分的，最多有顺序之分。
树状结构主要展现的是元素之间的关系。这种元素之间的关系有两层含义：
这种元素之间的关系，能够表示为层级关系，一种等级关系；
一样，这种元素之间的关系，能够表示为包含关系，即集合中的包含、隶属这种含义的关系；
四、树状结构的的原始数据
树状结构要展示，须要原始数据，目前来看，我见过的原始数据组织形式，有如下几种：
链表结构。
N叉树结构。
List结构。
通常来说数据是要作持久化的，这种持久化目前多储存于数据库中。
数据库中读出来的原始数据，若不通过加工，直接使用，多数是List结构。
以后将面临两个选择：
在服务器上将List加工成树结构，仍是发送List给浏览器，让浏览器加工成树结构？
结果显而易见，这种不是必须给服务器作的工做，固然不让服务器去作。
六、简单的树状结构Demo
更新在下文中
以上！