jstree打开多级节点(不是展开全部或者收起全部的那种)

{/*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:

  1. jstree_demo_div为对应的树的id或名

  2. clear_state():清除jstree保存的选中状态,重要!!(当初我花了很长时间才搞定这个属性,之前一直是打开五级以后的节点之后,然后刷新也不好使,即便使用了close_all选中状态一直存在,这个就可以清除选中状态)

  3. (重要!!)使用这个方法的前提是需要有parents这个属性

  4.  数据的获取应先在core.data.url来引入,datatype为json格式,data可以在$('#jstree_demo_div').jstree())里的_model.data里面获取,获取到的是对象,遍历时需要转化为数

  5. 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>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值