本文主要是介绍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属性，定制节点图标
这篇关于zTree树插件--树形菜单的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
