最近发现项目中很多地方都是树形菜单，而这些树形菜单都是使用树形插件zTree来制作的，所以就想自学一下zTree,参照官方文档写了一个简单的案例，使用zTree做了
一个最简单的树形结构。
案例：zTree 最简单的树
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zTree 最简单的树</title> <link rel="stylesheet" type="text/css" href="../trd/zTree_v3-master/zTree_v3-master/css/zTreeStyle/zTreeStyle.css"/> <script type="text/javascript" src="../trd/zTree_v3-master/zTree_v3-master/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../trd/zTree_v3-master/zTree_v3-master/js/jquery.ztree.core.js"></script> <script type="text/javascript">
var zTree;
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);
return false;
} else {
return true;
}
}
}
}; var zNodes =[
{id:1, pId:0, name:"水果", open:true},
{id:101, pId:1, name:"苹果"},
{id:102, pId:1, name:"香蕉"},
{id:103, pId:1, name:"梨"},
{id:10101, pId:101, name:"红富士苹果"},
{id:10102, pId:101, name:"红星苹果"},
{id:10103, pId:101, name:"嘎拉"},
{id:10104, pId:101, name:"桑萨"},
{id:10201, pId:102, name:"千层蕉"},
{id:10202, pId:102, name:"仙人蕉"},
{id:10203, pId:102, name:"吕宋蕉"},
]; $(document).ready(function(){
var t = $("#tree"); /**
* zTree 初始化方法：$.fn.zTree.init(t, setting, zNodes)
* t:用于展现 zTree 的 DOM 容器
* setting:zTree 的配置数据
* zNodes:zTree 的节点数据
*
*/ t = $.fn.zTree.init(t, setting, zNodes);
});
</script> </head>
<body> <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul> </body>
</html>
这是我自己从网上下载下来的一个zTree的版本，如果有需要，可以访问下面的链接进行下载。
zTree下载地址：http://files.cnblogs.com/files/zuidongfeng/zTree_v3-master.zip