<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的ztree</title>
<link href="css/zTreeStyle.css" rel="stylesheet" type="text/css">
<script src="http://localhost/jquery.js"></script>
<script src="js/jquery.ztree.all-3.3.min.js"></script>
<script>
var setting = {
async: {
enable: true,
url:"getNodes.php",
autoParam:["id"]
}
};
var setting2 = {
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
function beforeClick(treeId, treeNode, clickFlag) {
alert('要点了啊');
return (treeNode.click != false);
}
function onClick(event, treeId, treeNode, clickFlag) {
alert('已经点了');
}
var zNodes =[
{ id:1, pId:0, name:"父节点1 - 展开", open:true},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111",click:false},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function() {
$.fn.zTree.init($("#treeDemo"), setting);
$.fn.zTree.init($("#treeDemo2"), setting2, zNodes);
$('#a').click(function(){
var treeObj = $.fn.zTree.getZTreeObj('treeDemo2');
treeObj.expandAll(true);
});
$('#b').click(function(){
var treeObj = $.fn.zTree.getZTreeObj('treeDemo2');
treeObj.expandAll(false);
});
$('#c').click(function(){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo2");
treeObj.refresh();
});
});
</script>
</head>
<body>
<ul id="treeDemo" class="ztree"></ul>
<br />
<ul id="treeDemo2" class="ztree"></ul>
<a href="###" id="a">展开</a> <a href="###" id="b">关闭</a> <a href="###" id="c">刷新</a>
</body>
</html>
getNodes.php
<?php
$id=$_POST['id'];
$id=($id=="")?0:$id;
//根据id查询相关内容 二维数组
if($id=='0'){
$result[]=array('id'=>1,'pId'=>0,'name'=>'分类一','isParent'=>'true');
$result[]=array('id'=>2,'pId'=>0,'name'=>'分类二','isParent'=>'true');
}else if($id=='1'){
$result[]=array('id'=>3,'pId'=>1,'name'=>'分类1.1','url'=>'http://www.baidu.com','target'=>'_blank');
}else if($id=='2'){
$result[]=array('id'=>4,'pId'=>2,'name'=>'分类2.1');
}
echo json_encode($result);
?>
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
