Jquery-Ztree
Jquery-Ztree，封裝ztree類庫铐望，提供異步/同步方法冈涧，具體配置請參考ztree，依賴jquery正蛙，封裝jquery-ztree類庫督弓。
實(shí)例化方法
//ztree對象
var ztree;
//請求參數(shù)信息
var configs={
//async : false, // 不使用異步樹，默認(rèn)你需要一次加載所有的樹乒验，如果async:fasle不需要配置callback
service: 'data/parentTree.json', //url
params : {id : '1' , name:'zhangsan' },//請求參數(shù)
}
//ztree settings
var settings ={
check:{
enable:false //單選
},
view:{
showLine:false
}
,callback :{
//點(diǎn)擊展開之前愚隧，重新復(fù)制查詢條件
beforeExpand : function(treeId,treeNode){
//alert(treeNode.id);
//改變請求參數(shù)
configs={
service: 'data/subTree.json', //url
params : {id : treeNode.id , name : treeNode.name }//請求參數(shù)
}
//改變請求參數(shù)
ztree.setting.setParams(configs);//重新復(fù)制
}
}
}
//
$(function(){
//實(shí)例化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
