正文
首先npm引入：
npmijstree-S
在main中引入时需要注意，需要单独获取css文件并引入：
import'jstree'
import'./lib/jstree/themes/default/style.min.css'
先放出实例：
if($('#leftTree').jstree()){//判断是否已有实例
$('#leftTree').jstree().destroy();//销毁实例
};
$('#leftTree').on('ready.jstree',function(e,data){//所有节点完成加载后触发的事件
$('#leftTree').jstree().check_all();//选中所有节点
$('#leftTree').jstree().open_all();//打开所有节点
}).jstree({//一个元素是可以点（.）事件后再点创建实例的
core:{
data:data,//数据
check_callback:true//在对树进行改变时（如创建，重命名，删除，移动或复制），check_callback是必须设置为true
},
checkbox:{//去除checkbox插件的默认效果
tie_selection:false,
keep_selected_style:false,
whole_node:false
},
types:{
default:{
//icon:false//删除默认图标
},
parent:{
valid_children:["parent","file"]
< 9 e.icon="jstree-file";
returne;
}else{
varchildren=e.children;
varcArr=[];
children.forEach(function(c){
varcTmE=_this.treeDataWithParentChildType(c);
cArr.push(cTmE);
});
e.children=cArr;
}
returne;
}
//在修改数据的时候调用
varnewTreeData=[];
data.data.children.forEach(function(e){
e=_this.treeDataWithParentChildType(e);
newTreeData.push(e);
});
jsTree识别的节点的数据字段(core.data中的字段)是固定的，下面介绍一些主要字段：
text节点名
icon节点图标，默认为文件夹图标
jstree-file文件图标
state一个对象,对节点的状态设置
checked是否选中(复选框)
selected是否选中(点击选中)
opened打开节点(给第一个子节点添加后父节点就会打开)
disabled禁用节点
children子树
这里是一些主要配置：
core.data树的数据配置
core.check_callback当用户尝试修改树的结构时会发生什么情况,参数为false，则会阻止所有操作，如创建，重命名，删除，移动或复制。当参数为函数时,函数的第一个参数可能值有以下几种:'create_node','rename_node','delete_node','move_node','copy_node','edit'
core.multiple一个布尔值，指示是否可以选择多个节点
core.themes.dots一个布尔值，表示是否显示连接点
core.themes.icons一个布尔值，指示是否显示节点图标
checkbox.keep_selected_style是应保留还是删除节点的选定样式。默认为true。
plugins配置实例中使用的插件。是一个字符串数组，每个字符串是一个插件名
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html