1、需求分析
JQuery在做树形时，存在着一个难点，那就是jquery中想要获取到动态生成的dom元素节点，需要先定位到一个初始容器节点（也就是一个根元素，这个是固定不会变化的），由于开发时间有限，这一问题只得空闲时间去思考解决，查阅到jstree树形控件，便引入开始架构使用。
2、下载jstree
从官网[https://github.com/vakata/jstree/zipball/3.3.3(https://github.com/vakata/jstree/zipball/3.3.3)下载最新的版本，下载完成后，将dist目录下的所有文件，放到你的项目工程的js目录中。
3、基础使用
3.1、引入jstree以及jquery
由于jstree是基于jquery框架的一种开源控件，因此需要先引入jquery.js
3.2、定义jstree容器
树形元素存放的容器
3.3、初始化树形tree
3.3.1、创建json格式的数据
这是jstree的树形数据结构的格式定义
jstree的树形数据结构.png
jstree中，每个node必须要有两个树形：id和parent，指的当前节点的id和它的父节点，如果这个节点是第一层的话，那么可以将它的parent属性设置为：
#
let treeData = [{
"id": "1",
"parent": "#",
"text": "部门2"
}, {
"id": "2",
"parent": "#",
"text": "部门6"
}, {
"id": "3",
"parent": "1",
"text": "部门2-1"
},
{
"id": "6",
"parent": "1",
"text": "部门2-2"
}, {
"id": "7",
"parent": "6",
"text": "部门2-2-1"
},
{
"id": "4",
"parent": "2",
"text": "部门2-2"
}, {
"id": "5",
"parent": "3",
"text": "部门2-1-1"
}, {
"id": "8",
"parent": "3",
"text": "部门2-1-2"
}
]
3.3.2、开始对jstree进行配置
jstree中也支持很多事件的绑定
| 事件名 | 触发条件 | 用途 |
|---|---|---|
| select_node.jstree | 当选中一个节点时触发 | 选中一个节点，需要用到这个节点的数据 |
| changed.jstree | 选择节点时触发 | 更新节点时可以使用 |
$('#demo').jstree({
"core": {
"themes":{
"icons":false
},
"data": treeData
},
"plugins": ["checkbox", "themes"]
}).on('select_node.jstree', function(el,data) {
console.log("select_node.jstree: ", el,data)
}).on("changed.jstree", function(el,data) {
console.log("changed.jstree",el,data);
})
节点的数据分析.png
3.3.3、jstree的plugins选项
jstree提供了很多拓展插件的功能供用户使用，具体参考[https://www.jstree.com/plugins/(https://www.jstree.com/plugins/)
$('#demo').jstree({
"plugins": ["checkbox","contextmenu","dnd","massload","search","sort","state","types","unique","changed","wholerow","condtionalseect", "themes"]
})
3.4、jstree取消目录结构
jstree默认的是展示的目录层级结构，如：
目录结构.png
如果需求中不需要这个目录文件夹的形式，则需要添加配置去解决
"themes":{
"icons":false
}
$('#demo').jstree({
"core": {
"themes":{
"icons":false
},
"data": treeData
}
})
移除目录结构.png
从而解决了一系列问题，然后可以利用控件实现的树形效果，自己再去根据需求逻辑去进行业务逻辑的方法编写。