0
点赞
收藏
分享

微信扫一扫

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

腊梅5朵 2022-04-19 阅读 86
javascript

{/*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(),可以获取相对应的方法或数据

 

举报

相关推荐

0 条评论