{/*jstree加载完成的时候触发事件*/}
$('#jstree_demo_div').on("loaded.jstree", function(e, data) {
data.instance.clear_state();//清除jstree保存的选中状态,重要!!
var obj=data.instance._model.data;
// console.log(typeof obj);//此时获取到的为对象
var arr=Object.values(obj);//对象转化为数组
var arrLevel4(可更换其他的名)=[]//定义一个不大于4级(或n级)节点的空数组
var level4(可更换名)=[]//定义一个等于4级(或n级)节点的空数组
arr.map(function(item,index) {//遍历
if(item.parents.length<=4) { //如果节点<=4级(包含的父结点个数<=4)
arrLevel4.push(item.id)//空数组赋值
}
if(item.parents.length==4){//如果节点为4级(包含的父结点个数=4)
level4.push(item.id)
}
})
// console.log(arrLevel4)//现在数组有值 此时的arrLevel4类型为对象
// console.log(level4)
for(let i in arrLevel4){
//_open_to(obj):所有节点已经加载完时,打开节点的所有父节点
//open_node: 打开一个节点,显示其子节点。如果未加载该节点,则准备就绪后将对其进行加载和打开。
$('#jstree_demo_div').jstree().open_node(arrLevel4[i]);
// or
// data.instance._open_to(arrLevel4[i]);
// or
//$('#jstree_demo_div').jstree()._open_to(arrLevel4[i]);
}
for(let j in level4){
//close_all关闭一个节点(或树)中的所有节点,显示其子节点
//close_node关闭节点,隐藏其子节点
$('#jstree_demo_div').jstree().close_all(level4[j]);
// or
// $('#jstree_demo_div').jstree().close_node(level4[j]);
}
}
notes:
-
jstree_demo_div为对应的树的id或名
-
clear_state():清除jstree保存的选中状态,重要!!(当初我花了很长时间才搞定这个属性,之前一直是打开五级以后的节点之后,然后刷新也不好使,即便使用了close_all选中状态一直存在,这个就可以清除选中状态)
-
(重要!!)使用这个方法的前提是需要有parents这个属性
-
数据的获取应先在core.data.url来引入,datatype为json格式,data可以在$('#jstree_demo_div').jstree())里的_model.data里面获取,获取到的是对象,遍历时需要转化为数
-
data.instance 的作用相当于$('#(树的名)').jstree(),可以获取相对应的方法或数据
代码示例
<div id="container"></div>
<script type="text/javascript">
$(function () {
$('#container').jstree({
'core': {
'data': [{ "id": "1", "parent": "#", "text": "Root node 2", "name": "Root node 2" },
{ "id": "2", "parent": "1", "text": "Child 1", "name": "Child 1" },
{ "id": "3", "parent": "2", "text": "Child 12", "name": "Child 12" },
{ "id": "55", "parent": "2", "text": "Child 13", "name": "Child 13" },
{ "id": "4", "parent": "2", "text": "Child 14", "name": "Child 14" },
{ "id": "788", "parent": "2", "text": "Child 15", "name": "Child 15" },
{ "id": "8899", "parent": "3", "text": "Child 25", "name": "Child 25" },
{ "id": "6", "parent": "3", "text": "Child 2511", "name": "Child 2511" },
{ "id": "7", "parent": "3", "text": "Child 2512", "name": "Child 2512" },
{ "id": "8", "parent": "3", "text": "Child 2513", "name": "Child 2513" }],
"check_callback": true
},
"plugins": ["checkbox", "contextmenu","state"],
"state":{
"opened":false
}
});
$('#container').on("loaded.jstree", function (e, data) {
console.log($('#container').jstree())
data.instance.clear_state();//清除jstree保存的选中状态,重要!!
var obj = data.instance._model.data;
console.log(obj);
// console.log(typeof obj);//此时获取到的为对象
var arr = Object.values(obj);//对象转化为数组
console.log(arr);
var arrLevel2 = []//定义一个不大于2级(或n级)节点的空数组
var level2 = []//定义一个等于2级(或n级)节点的空数组
arr.map(function (item, index) {//遍历
if (item.parents.length <= 2) { //如果节点<=2级(包含的父结点个数<=2)
arrLevel2.push(item.id)//空数组赋值
}
if (item.parents.length == 2) {//如果节点为2级(包含的父结点个数=2)
level2.push(item.id)
}
})
console.log(arrLevel2)//现在数组有值 此时的arrLevel2类型为对象
console.log(level2)
for (let i in arrLevel2) {
//_open_to(obj):所有节点已经加载完时,打开节点的所有父节点
//open_node: 打开一个节点,显示其子节点。如果未加载该节点,则准备就绪后将对其进行加载和打开。
$('#container').jstree().open_node(arrLevel2[i]);
// or
// data.instance._open_to(arrLevel2[i]);
// or
//$('#jstree_demo_div').jstree()._open_to(arrLevel2[i]);
}
for (let j in level2) {
//close_all关闭一个节点(或树)中的所有节点,显示其子节点
//close_node关闭节点,隐藏其子节点
$('#container').jstree().close_all(level2[j]);
// or
// $('#jstree_demo_div').jstree().close_node(level2[j]);
}
});
});
</script>