官网下载及文档：https://www.jstree.com/
一. 介绍jsTree是jQuery插件，它提供交互式树。在MIT许可下，它是完全免费的、开源的和分布式的。 jsTree具有可扩展性、可扩展性和可配置性，支持HTML和JSON数据源、Ajax和异步回调加载。
jsTree在Box模型（内容框或边框）中的功能是正确的，可以作为AMD模块加载，并且具有内置的可移动响应设计主题，可以轻松定制。它使用jQuery的事件系统，因此对树中的各种事件的绑定回调是熟悉和容易的。
将解压包中 dist 文件夹 拷贝到项目中，引入.css和.js， jquery必须大于1.9.1
二、入门使用
1、用html标签定义树
jsTree可以将常规无序列表转换为树。
所需的最小标记是一个
-
节点，其中包含一些嵌套
-
节点，其中包含一些文本。
孩子节点，依次嵌套一个
-
节点
-
Root node 1
- chlid node1
- chlid node2
- chlid node3
-
Root node 2
- chlid node1
- chlid node2
- id - 这个ID会在对应的‘LI’ 节点上设置html标签的ID属性. 请确保ID的唯一性，每个节点的ID都应该不一样，否则会有出现一些莫名其妙的问题.(注意了, 如果你没有自定义节点的ID，这些ID是自动生成的).
- text - 节点内容
- icon - 节点图标，可以设置表示路径、一个或者多个CSS类名、字体图标的字符串.
- data - 任何数据，设置这个属性没有任何UI上的效果，任何时候都可以读写这个数据.
-
state - 对象类型，一个节点的状态有一下几种:
- selected - 节点处于被选中状态
- opened - 节点处于打开状态
- disabled - 节点不可选
- checked - 用于checkbox插件 - 勾选该checkbox(只有当 tie_selection 处于 false时有效)
- undetermined - 用于checkbox插件 - 状态待定 (只有启用懒加载并且节点没有被加载时生效).
- type - 用于types插件 - 用来定义节点类型，默认为 "default" 类型.
- li_attr -包含DOM属性的对象， 会追加到该节点对应的LI标签.
- a_attr - -包含DOM属性的对象， 会追加到该节点对应的A标签.
有一个
容器包装-
并在该容器上创建实例即可:
$('#htmlTree').jstree();。
用html标签定义树
$(function () { $("#htmlTree").jstree({}); //一旦DOM准备就绪，就开始初始化jstree实例 });
2、用JSON数据填充树
使用JSON对象填充树，您需要使用$.jstree.defaults.core.dataconfig选项 可以使用AJAX使用服务器返回的JSON填充树。格式保持相同，唯一的区别是JSON不在配置对象内，而是从服务器返回
JSON数据格式定义树
$("#jsonjsTree").jstree({ 'core': { "data":[ { "id": "0", "text": "根节点1", "state":{"opened":true}, "children": [ {'text': 'child1'}, {'text': 'child2'}, ] }, { "id": "1", "text": "根节点2", "children": [ {'text': 'child1'}, {'text': 'child2'}, ] }, ] } });data：JSON 数据固定格式：
// Expected format of the node (there are no required fields) { id : "string" // will be autogenerated if omitted text : "string" // node text icon : "string" // string for custom state : { opened : boolean // is the node open disabled : boolean // is the node disabled selected : boolean // is the node selected }, children : [] // array of strings or objects li_attr : {} // attributes for the generated LI node a_attr : {} // attributes for the generated A node }补充：JSON数据的固定格式 提供的JSON数据必须符合一定的格式, 每个对象对应一个节点,如果该节点有子节点，还需要提供children属性。children属性是一个相同格式的对象数组。
节点对象中，还提供了一些可选的配置:
如果您不想使用嵌套children方法，则可以使用替代语法，其中每个节点对象都有两个必填字段：id＆parent和no childrenproperty（其他所有内容保持不变）。后面学习
三、 配置与插件$("#tree").jstree({ /* config object goes here */ });config 对象的每一个属性，都对应着一种插件.而属性的值的配置，是专门给该插件提供的.此外还有两个特别的属性"core"和"plugins": "core"存放着核心的配置。 "plugins"是一个数组，包含了当前要激活的各个插件的字符串名称.
记住，我们需要配置的仅仅是不同于默认配置的那一部分选项.
更详细的方法和事件使用说明，请参考API文档
注意： 在引用"plugins"属性时，必须在 core 中设置 'check_callback': true, 来启用所有引用插件属性。
默认情况下，所有的修改操作都是不启用的.像拖放,新增，修改，删除这样的功能，需要你配置启用.
"plugins" : [ "checkbox", "contextmenu", "dnd", "massload", "search", "sort", "state", "types", "unique", "wholerow", "changed", "conditionalselect" ]
常用插件：
dnd： 提供拖放功能，重现整理树节点 checkbox: 标记多选 contextmenu: 显示右键菜单 state: 保存用户所浏览节点的状态，便于切换会相同的树时，恢复选中的状态. types: 给节点增加一个类型.主要是为了便于控制和维护相同的type节点的配置。 节点设置type属性时，匹配types对象中相同的属性. unique: 命名唯一，不允许在同一级下有命名相同的节点. 当移动到的parent节点下，存在同名的节点时，不允许移动.
1、多选、拖放和state
2、右击菜单
contextmenu：就是对 contextmenu 扩展功能的重新定义
- items：这里设置需要定义的设置项，前四个都是默认的，后面三个相当于是自定义三个方法应该不难理解，
- label：设置右击之后标签显示内容，
- action：定义方法
获取节点信息方式：
var inst = jQuery.jstree.reference(data.reference); 通过reference获取当前选中节点的引用，然后
var obj = inst.get_node(data.reference); 通过get_node方法获取节点的信息
简单 前段右击菜单操作， 可用 ajax 实现与后端交互
JSON数据格式定义树 获取选中节点信息刷新树
参考文章：https://blog.csdn.net/qq_24472595/article/details/70053863
入门使用 end ~
-
Root node 1
