官网下载及文档：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
$(function () { $("#jsonjsTree").jstree({ "core": { "multiple": true, //单选或多选 "themes": { "dots": true //点之间连接线 }, "check_callback": true, //启用所有引用插件 "data":[ { "text": "根节点1", "state":{"opened":true}, "children": [ {'text': 'child11'}, {'text': 'child12'}, ] }, { "text": "根节点2", "children": [ {'text': 'child21'}, {'text': 'child22'}, ] }, ] }, "plugins": ["state","checkbox","contextmenu","dnd"] }); }); //获取选中节点 id 和 text 信息 function acquireCheckbox(){ var allNodeIds = $('#jsonjsTree').jstree().get_checked(); $.each(allNodeIds, function (i,val) { var nodeTest = $('#jsonjsTree').jstree().get_text(val); alert(val + ":" + nodeTest); }) }
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数据格式定义树 获取选中节点信息 刷新树 $(function () { $("#jsonjsTree").jstree({ "core": { "multiple": true, //单选或多选 "themes": { "dots": true //点之间连接线 }, "check_callback": true, //启用所有引用插件 "data":[ { "text": "根节点1", "state":{"opened":true}, "children": [ {'text': 'child11'}, {'text': 'child12'}, ] }, { "text": "根节点2", "children": [ {'text': 'child21'}, {'text': 'child22'}, ] }, ] }, "plugins": ["state","checkbox","contextmenu","dnd"], "contextmenu":{ "items": { "create": null, "rename": null, "remove": null, "ccp": null, "add": { "label": "新增", "action": function (data) { var inst = jQuery.jstree.reference(data.reference), obj = inst.get_node(data.reference); //ajax 交互后台 console.log(inst + ":" + obj); var newNode = inst.create_node(inst.get_node(data.reference),'请输入名称',"after","",""); inst.edit(newNode,newNode.val) } }, "delete":{ "label":"删除", "action":function(data){ var inst = jQuery.jstree.reference(data.reference), obj = inst.get_node(data.reference); if(confirm("删除此节点将会连同子节点一起删除，确定要删除吗？")){ if(1 == 1){ $("#jsonjsTree").jstree().delete_node(data.reference); alert("删除菜单成功！"); }else{ alert("删除菜单失败！"); } } } }, "edit":{ "label":"编辑", "icon" : "iconfont icon-fanchuan", "action":function(data){ var inst = jQuery.jstree.reference(data.reference), obj = inst.get_node(data.reference); alert(obj.id + ": " + obj.text); $("#jsonjsTree").jstree().edit(obj ); } } } } }); }); //获取选中节点 id 和 text 信息 function acquireCheckbox(){ var allNodeIds = $('#jsonjsTree').jstree().get_checked(); $.each(allNodeIds, function (i,val) { var nodeTest = $('#jsonjsTree').jstree().get_text(val); alert(val + ":" + nodeTest); }) } //刷新树 function refreshTree(){ $("#jsonjsTree").jstree("refresh"); //刷新树 }
参考文章：https://blog.csdn.net/qq_24472595/article/details/70053863
入门使用 end ~
- Root node 1
