来源：http://itssh.cn/post/11.html

Jquery-Ztree

Jquery-Ztree，封装ztree类库，提供异步/同步方法，具体配置请参考ztree，依赖jquery，封装jquery-ztree类库。

github地址：https://github.com/sm0210/Jquery-Ztree

@author:SM
@desc:Ztree 组件(异步 or 同步加载)
@e-mail:sm0210@qq.com
@version 1.0

实例化方法

//ztree对象
var ztree;
//请求参数信息
var configs={
 //async : false, // 不使用异步树，默认你需要一次加载所有的树，如果async:fasle不需要配置callback
 service: 'data/parentTree.json', //url
 params : {id : '1' , name:'zhangsan' },//请求参数
}
//ztree settings
var settings ={
    check:{
        enable:false //单选
    },
    view:{
        showLine:false  
    }
    ,callback :{
        //点击展开之前，重新复制查询条件
        beforeExpand : function(treeId,treeNode){
            //alert(treeNode.id);
            //改变请求参数
            configs={
                 service: 'data/subTree.json', //url
                 params : {id : treeNode.id , name : treeNode.name }//请求参数
            }               
            //改变请求参数
            ztree.setting.setParams(configs);//重新复制
        }   
    }
}
//
$(function(){
//实例化Ztree
ztree=$('#treeDemo').initZtree(configs,settings);   
//console.log(ztree);   
});

function showVal(){
    //获取提供的JS方法 --单选
    //console.log(ztree.setting.getValue().name);

    //单选
    var obj=ztree.getSelectedNodes();
    if(obj.length)
        alert(obj[0].id +" == "+obj[0].name);
    //console.log(obj.length);
    
    
    //多选
    /*var objAll=ztree.getChangeCheckedNodes();
    console.log(objAll.length);
    
    for(var i=0;i<objAll.length;i++){
        console.log(objAll[i].id +" == "+objAll[i].name);
    }
    */
        
}

html代码

<div style="border:1px solid red; margin:0 auto; width:500px;" >
<!--ztree-->
<div class="zTreeDemoBackground left">
  <ul id="treeDemo" class="ztree"></ul>
</div>
<!--ztree-->
<br />
<br />
<input type="button" value="获取值" onclick="showVal();"/>

效果

jquery-ztree.png

如果您觉得此文有帮助，可以打赏点钱给我支付宝sm0210@qq.com ，或扫描二维码

sm0210@qq.com.jpg

来源：http://itssh.cn/post/11.html