本文介绍了如何使用Jquery Ztree3.5创建树形菜单，包括引入必要的CSS和JS文件，设置节点数据和配置项，以及调用方法初始化树形结构。通过一个简单的实例展示了Ztree的基本功能。
之前用过jquery的treeview，用ul，li，span拼接，有点繁琐，今天听朋友介绍知道还有个ztree，特意来试试看。
http://www.ztree.me/v3/main.php 这个是ztree的官网，里面有很多实用的小例子，参考这些例子来学习，能少走不少弯路（下载的ztree里也有demo可以参考，一样的东西）。
1. jsp方面
页面导入js，css如下：
<link rel="stylesheet" type="text/css" href="<%=path %>/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="<%=path %>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.ztree.all-3.5.min.js"></script>
设置setting属性和节点数组
<script type="text/javascript">
var setting = {
check: {
enable: true,
nocheckInherit: true
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"随意勾选 1", open:true},
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"无 checkbox 1-1-1", nocheck:true},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"无 checkbox 1-2", nocheck:true, open:true},
{ id:121, pId:12, name:"无 checkbox 1-2-1"},
{ id:122, pId:12, name:"无 checkbox 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-3"}
];
</script>
调用方法生成树
<script type="text/javascript">
$(function(){
//alert($("#ztree").zTree);
//ztree=$("#ztree").zTree(settting,treeNodes);
$.fn.zTree.init($("#ztree"), setting, zNodes);
});
</script>
body里有个id为ztree的元素
<body>
<div class="zTreeDemoBackground left">
<ul id="ztree" class="ztree"></ul>
</div>
大功告成，很简单的小例子，实现了基本显示，如果还有其他高级需求，参照api和demo~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
