关键词：
zTree下载：https://github.com/zTree/zTree_v3
目录：
就我看来，zTree较为实用的有以下几点：
- zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
- 支持 JSON 数据
- 支持静态 和 Ajax 异步加载节点数据
- 支持任意更换皮肤 / 自定义图标
- 支持极其灵活的 checkbox 或 radio 选择功能
- 提供多种事件响应回调
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
- 在一个页面内可同时生成多个 Tree 实例
- 简单的参数配置实现 灵活多变的功能
zTree入门几个要点（引入& 声明className & 具体的多看api）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="demoStyle/demo.css" type="text/css"> <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <!--引入ztree样式--> <script type="text/javascript" src="jquery-1.4.2.js"></script> <!--要首先引入jquery文件--> <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解） var setting = {}; // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解） var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ]; //页面加载完成后，加载json数据，进行初始化 $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </SCRIPT> </HEAD> <BODY> <div> <ul id="treeDemo" class="ztree"></ul> <!--className要设置为ztree， class="ztree"--> </div> </BODY> </HTML>
以构建页面左侧树形菜单为例介绍ztree插件的使用
1. 引入ztree的相关文件
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all.js"></script>
这里引入包含ztree所有功能的js文件，实际使用中可根据需要来引用，以节省资源
2. 使用json数据构造ztree
2.1 使用标准json数据构造ztree（看看就行，不推荐）
<!-- 展示树形菜单 ：使用标准json数据构造--> <ul id="ztree1" class="ztree"></ul> <script type="text/javascript"> $(function(){ //当页面加载完成后，动态创建ztree菜单 var setting = {};//设置ztree相关的属性 //构造json数据 var zNodes = [ {name:'系统管理'},//每个json对象对应一个节点数据 {name:'用户管理',children:[ {name:'用户添加'}, {name:'用户修改'} ]},//每个json对象对应一个节点数据 {name:'权限管理'}//每个json对象对应一个节点数据 ]; //创建ztree $.fn.zTree.init($("#ztree1"),setting,zNodes); }); </script>
2.2 使用简单json构造ztree（推荐）
<!-- 展示树形菜单 ：使用简单json数据构造--> <ul id="ztree2" class="ztree"></ul> <script type="text/javascript"> $(function(){ //当页面加载完成后，动态创建ztree菜单 var setting2 = { data: { simpleData: { enable: true//启用简单json数据描述节点数据 } } };//设置ztree相关的属性 //构造json数据 var zNodes2 = [ {id:'1',pId:'0',name:'系统管理'},//每个json对象对应一个节点数据 {id:'2',pId:'0',name:'用户管理'},//每个json对象对应一个节点数据 {id:'21',pId:'2',name:'用户添加'},//每个json对象对应一个节点数据（二级） {id:'22',pId:'2',name:'用户修改'},//每个json对象对应一个节点数据（二级） {id:'3',pId:'0',name:'权限管理'}//每个json对象对应一个节点数据 ]; //创建ztree $.fn.zTree.init($("#ztree2"),setting2,zNodes2); }); </script>
树形菜单效果如下：
2.3 实际项目开发中，为便于维护，数据会单独存放在一个json文件中，这时需要发送ajax请求获取菜单数据构造ztree
<ul id="ztree3" class="ztree"></ul> <script type="text/javascript"> $(function(){ var setting3 = { data : { simpleData : { enable : true //启用简单json数据描述节点数据 } } };//设置ztree相关的属性 //发送ajax请求获取json数据构造ztree var url = "${pageContext.request.contextPath}/json/menu.json"; $.post(url,{},function(data){ //创建ztree $.fn.zTree.init($("#ztree3"), setting3, data); },'json'); }); </script>
menu.json
[
{ "id":"11", "pId":"0", "name":"基础数据"},
{ "id":"112", "pId":"11", "name":"取派员设置", "page":"page_base_staff.action"},
{ "id":"113", "pId":"11", "name":"区域设置","page":"page_base_region.action"},
{ "id":"114", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},
{ "id":"115", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},
{ "id":"12", "pId":"0", "name":"受理"},
{ "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},
{ "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},
{ "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},
{ "id":"13", "pId":"0", "name":"调度"},
{ "id":"131", "pId":"13", "name":"查台转单","page":""},
{ "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"}
]
树形菜单效果如下：
3. 为ztree节点绑定事件，使得点击节点时打开相关的选项卡
<ul id="ztree3" class="ztree"></ul> <script type="text/javascript"> $(function(){ var setting3 = { data : { simpleData : { enable : true //启用简单json数据描述节点数据 } }, callback: {//绑定事件 onClick: function(a,b,treeNode){ var page = treeNode.page; if(page != undefined){//需要打开选项卡 //判断当前选项卡是否已经打开 var e = $("#tt").tabs("exists",treeNode.name); if(e){ //已经打开 $("#tt").tabs("select",treeNode.name); }else{ $("#tt") .tabs( "add", { title : treeNode.name, content : '<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>', closable : true, iconCls : 'icon-edit' }); } } } } };//设置ztree相关的属性
//发送ajax请求获取json数据构造ztree var url = "${pageContext.request.contextPath}/json/menu.json"; $.post(url,{},function(data){ //创建ztree $.fn.zTree.init($("#ztree3"), setting3, data); },'json'); }); </script>
效果：
使用ztree展示树形菜单结构
官网：http://www.treejs.cn/v3/main.php#_zTreeInfo一、功能简介在权限系统中，实现给角色指定菜单权限的功能。主要包括以下几点：读取全部菜单项，并以树形结构展现；勾选角色拥有的菜单权限，保存入库；重新编辑角色权限时，默... 查看详情
jquery+ztree加载树形结构菜单
...JQuery的核心代码，实现一套能完成大部分常用功能的Tree插件2、zTreev3.0将核心代码按照功能进行了分割，不需要的代码可以不用加载3、采用了延迟加载技术，上万节点轻松加载，即使在IE6下也能基本做到秒杀4、兼容IE、FireFox、Ch 查看详情
使用ztree控件制作的表格形式的树形+数据菜单
測试了一下,兼容ie7以上,chromeoperaff不使用对方css/*-------------------------------------zTreeStyleversion: 3.4author: Hunter.zemail: [email protected]website: http://code.google.com/p/jquerytree/------------ 查看详情
ztree树形菜单交互选项卡效果实现
1、添加自定义属性page 2、为ztree每个树形节点，添加点击事件1<!DOCTYPEhtml>2<html>34<head>5<metacharset="UTF-8">6<title>ztree树形菜单的使用</title>7<!--导入jquery核心类库-->8<scripttype="t 查看详情
ztree显示树形菜单
ztree显示树形菜单子节点如果太长了就会破环页面布局把列表页面撑到下面了如何解决参考技术A固定长宽出现滚动条就好了 查看详情
easyui+ztree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <!--导入juery核心配置文件--> <scripttype="text/javascript"src="../js/jquery-1.8.3.js"></s 查看详情
递归嵌套for循环map集合方式实现树形结构菜单列表查询(代码片段)
...。比如我们需要编写一个树形结构的菜单，那么我们可以使用JQuery的zTree插件：http://www.treejs.cn/v3/main.php#_zTreeInfo例如现在需要编写一个这样的菜单列表。那么就可以使用JQuery的zTree插件。先看一下数据库表结构。CREATETABLE`permission 查看详情
制作一棵ztree
...树形菜单的效果。zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree的最大优点。 接下来，我演示一棵简单的ztree，效果如下所示： 案例架构如下： 其中，测试文件index.... 查看详情
项目一众筹网05_01_[树形结构开发]菜单维护-树形结构基础知识自关联ztree的介绍和使用如果可以尽量不要嵌套循环时间复杂度和空间复杂度的区别
树形结构开发]菜单维护文章目录树形结构开发]菜单维护01-菜单维护-树形结构基础知识-上==在数据库中怎么去表示树形关系====其实这就是自关联====我们怎么识别根节点==02-菜单维护-树形结构... 查看详情
（十四）角色管理（ztree插件的基本使用）
1.建表角色表菜单表 角色-菜单表 查看详情
ztree学习笔记
在项目当中，经常会用到ztree树形插件，之前做的几个项目当中都用到了这个插件，感觉功能还是很强大的，而且在网上还找到了中文的API，因为项目中的树形结构不是自己做的，所以现在从头学习一下，并且记录一下... 查看详情
layer+ztree实现弹出框+树形图
参考文献layer弹出框，zTree树插件，树形图zTree官网手把手教你学zTree弹层组件文档-layui.layerlayer快速上手layui在线示例 查看详情
项目一众筹网06_03给角色分配菜单权限表的设置使用ztree来实现节点判断（后端不写代码也能实现树形开发）接口不能写@service注解，实现类才能写
...设置15-打开模态框-空模态框16-打开模态框-显示树-发请求使用zTree来实现节点判断、组装17-打开模态框-显示树- 查看详情
ztreed的使用
...quo;。 应用场景：权限菜单二：文案提供的使用文件，看附件三：使用。实现zTree的步骤第一步：拷贝如下引入的css/js文件到项目的ztree-test.html页面第二步：拷贝js到页面 查看详情
ztree插件实现菜单树
1<!DOCTYPEhtml>2<html>3<head>4 <metacharset="utf-8"/>5 <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">6 <title>Title</title>7 <linkhref="J 查看详情
ztree的核心处理逻辑(代码片段)
zTree是一个前端树形结构的插件。使用起来很简单，我们重点关注一下插件的核心代码。首先，zTree需要如下的数据结构：letareaData=["id":"1","pId":"0","name":"河南省","sort":"0","id":"2","pId":"1","name":"鹤壁","sort":"10","id":"3","pId":"2","name":"市... 查看详情
展示树菜单(ztree)(代码片段)
...数据功能强大。相信涉及大型项目或者大量数据时，它的使用将非常方便。利用ztree和Dwr框架可以轻松的实现后台数据的异步加载，他们都是利用Ajax进行后台数据的异步刷新的，页面不会重新加载，而且速度非常快兼容IE、FireFox... 查看详情
bootstrap树形菜单插件treeviewjs使用方法详解
...链接等，还是很不错的。效果图： 具体使用方法：插件依赖Bootstrapv3.0.3jQueryv2.0.3以上两个外部依赖文件已经经过测试可以正常使用，其他版本的Bootstrap需要另行测试。该插件不支持bootstrap2。使用方法首先要在... 查看详情