實現效果：
代碼如下：
<html>
<head><title></title></head>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.ztree.all-3.5.min.js"></script>
<link href="zTreeStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(function(){
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
}
},
onClick:function(event,treeId,treeNode){
if(treeNode.id > 300){
alert('你點擊的節點名稱爲-->'+treeNode.name);
}else if(treeNode.id == 101 || treeNode.id == 102){
window.location.href=treeNode.url;
}
},
onCheck:function(event,treeId,treeNode){
alert('你選擇的節點名稱爲-->'+treeNode.name);
}
},
check:{
enable:true
}
};
var zNodes =[
{id:1, pId:0, name:"頂層節點1", open:true},
{id:101, pId:1, name:"去百度",url:'http://www.baidu.com',target:'_self'},
{id:102, pId:1, name:"去谷歌",url:'http://www.google.com',target:'_top'},
{id:103, pId:1, name:"連接線"},
{id:104, pId:1, name:"不顯示"},
{id:105, pId:1, name:"自定義圖標"},
{id:2, pId:0, name:"頂層節點2", open:false},
{id:201, pId:2, name:"Checkbox 勾選操作"},
{id:206, pId:2, name:"Checkbox nocheck 演示"},
{id:207, pId:2, name:"Checkbox chkDisabled 演示"},
{id:208, pId:2, name:"Checkbox halfCheck 演示"},
{id:202, pId:2, name:"Checkbox 勾選統計"},
{id:203, pId:2, name:"用 zTree 方法 勾選 Checkbox"},
{id:204, pId:2, name:"Radio 勾選操作"},
{id:3, pId:0, name:"頂層節點3", open:false},
{id:301, pId:3, name:"拖拽 節點 基本控制", file:"exedit/drag"},
{id:302, pId:3, name:"拖拽 節點 高級控制", file:"exedit/drag_super"},
{id:303, pId:3, name:"用 zTree 方法 移動 / 複製 節點", file:"exedit/drag_fun"},
{id:304, pId:3, name:"基本 增 / 刪 / 改 節點", file:"exedit/edit"},
{id:305, pId:3, name:"高級 增 / 刪 / 改 節點", file:"exedit/edit_super"},
];
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
$("#expandAll").bind('click',function(){
t.expandAll(true);
});
$("#selected").bind('click',function(){
var nodes = t.getCheckedNodes();
alert(nodes.length);
if(nodes.length == 0){
alert("你還未選在任何節點");
}else{
var s = "";
for(i = 0; i < nodes.length; i++){
s+= nodes[i].name+" ";
}
alert("你選擇的節點有：\r\n\t"+s);
}
});
});
</script>
<body>
<ul id="tree" class="ztree"></ul>
<br/>
<input type="button" value="展開全部節點" id="expandAll"/>
<input type="button" value="獲取選在的節點" id="selected"/>
</body>
</html>