zTree树插件--树形菜单

使用 ztree插件，制作树形菜单
zTree 是一个依靠 jQuery实现的多功能
“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree 最大优点。
 
下载 ztree 3.5.02版本


 
api
文档
css
样式
demo
案例
js
核心类库文件
 
all.js = core + check + edit + hide  开发中只需要引入all.js

 
 
在页面引入 ztree
<!--引入[u]ztree[/u]  -->

<script type="text/javascript" src="${pageContext.request.contextPath
}/js/ztree/jquery.ztree.all-3.5.js"></script>

<link rel="stylesheet" type="text/css" 
href="${pageContext.request.contextPath
}/js/ztree/zTreeStyle.css"/>
 
案例一：标准数据tree
1、 在显示树位置写<ul>
标签
<!--显示树
-->

<ul id="basicTree" class="ztree"></ul>
2、 通
4000
过js编写setting对象
//设置树参数

var
setting = {};
3、 设置树节点数据
//数据

[b]var[/b]zNodes
= [

{"name":"菜单一"},//每个{}
就是一个节点

{"name":"菜单二"}

];
4、初始化树
//初始化树

$.fn.zTree.init($("#basicTree"),
setting, zNodes);
 
复杂树


 
问题：标准数据树，不适用大数据的树结构

 
案例二：简单数据ztree
1、 在显示ztree位置定义ul
<!--显示树(简单数据) -->

<ul id="simpleTree" class="ztree"></ul>
 
2、 设置ztree参数setting

//设置树参数

[b]var[/b]setting
= {

data
: {

simpleData
: {

enable
: [b]true[/b]

}

}

};
3、 树节点数据
//数据

[b]var[/b]zNodes
= [

    //
id 代表本节点编号，pId代表父节点编号

{"id":"1","pId":"0","name":"菜单一"},

{"id":"2","pId":"0","name":"菜单二"}

];
 
4、 初始化树
//初始化树

$.fn.zTree.init($("#simpleTree"),
setting, zNodes);
 
复杂树


 
 
通过url属性，完成树节点跳转

通过icon属性，定制节点图标