zTree树插件--树形菜单

使用 ztree插件，制作树形菜单

zTree 是一个依靠 jQuery实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是zTree 最大优点。

 

下载 ztree 3.5.02版本

 

api 文档

css 样式

demo 案例

js 核心类库文件

 

all.js = core + check + edit + hide  开发中只需要引入all.js

 

 

在页面引入 ztree

<!--引入ztree  -->

<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、 通过js编写setting对象

//设置树参数

var setting = {};

3、 设置树节点数据

//数据

varzNodes = [

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

{"name":"菜单二"}

];

4、初始化树

//初始化树

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

 

复杂树

 

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

 

案例二：简单数据ztree

1、 在显示ztree位置定义ul

<!--显示树(简单数据) -->

<ul id="simpleTree" class="ztree"></ul>

 

2、 设置ztree参数setting

//设置树参数

varsetting = {

data : {

simpleData : {

enable : true

}

}

};

3、 树节点数据

//数据

varzNodes = [

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

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

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

];

 

4、 初始化树

//初始化树

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

 

复杂树

 

 

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

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