Jquery-Ztree
Jquery-Ztree，封装ztree类库，提供异步/同步方法，具体配置请参考ztree，依赖jquery，封装jquery-ztree类库。
实例化方法
//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
