使用zTree插件构建树形菜单
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插件构建树形菜单的更多相关文章
- java构建树形菜单递归工具类
1.设计菜单实体 import java.util.List; public class Menu { //菜单id private Long id; //父节点id private Long par ...
- ExtJS4.2 根据数据库记录构建树形菜单
背景:最近用ExtJS4.2做一个系统,需要在前端展示资源菜单,为树形结构,该树形结构是从数据库动态加载的. ExtJS的树形结构大致有两种情况: 1.静态树形结构,此处不多说,看API就能简单明白: ...
- 前框 （一个）zTree 从数据库树形菜单动态加载
这些天做动态菜单使用此插件.现在有一个非常广泛的开源框架,最新QUI框架是菜单部分使用这个插件开发,因此,它是非常值获取深入的研究和探讨,通过使用非常丰富的感觉功能,己开发和编写,官网上有非常详尽的A ...
- EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...
- 构建简单的json树形菜单
json结构: var Menu = [{ tit:"一级菜单", submenu:[{ tit:"二级菜单", url:"", func: ...
- jQuery树形菜单(1)jquery.treeview
jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...
- ztree插件的使用
在bootstrap中使用ztree插件做树形架构,由于觉得原始的树形不够美观,所以改了其中的css插件 demo演示,以及各种属性的用法网站: http://www.treejs.cn/v3/de ...
- Bootstrap风格zTree树形菜单插件
这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...
- jQuery树形菜单，使用zTree插件,异步载入 & 编辑功能&Check 共存
一.下载zTree插件 地址:http://www.ztree.me 二.HTML代码 <%@ Page Language="C#" AutoEventWireup=&quo ...
随机推荐
- nodejs获取ASP.Net WebAPI(IIS Windows验证)
处理了很多天,终于使用Nodejs可以发出请求至WebAPI,能够正常处理数据了 首先加入npm包 npm install httpntlm 在app.js中加入代码 var httpntlm = r ...
- cvCalcOpticalFlowPyrLK的使用--基于高斯金字塔的稀疏光流特征集求解
void cvCalcOpticalFlowPyrLK( const CvArr* prev, const CvArr* curr, CvArr* prev_pyr, CvArr* curr_pyr, ...
- 索引（Index）
无索引的表就是一个无序的行集.比如下面的人员表中有一些数据: 这个表上没有索引,因此如果我们查找年龄等于17的人员时,必须查看表中的每一行,看它是否与所需的值匹配.这是一个全表扫描,很慢,如果表中只有 ...
- [Contest20180316]Mythological IV
令$S(n)=\sum\limits_{i=0}^{n-1}f(i)q^i$,那么存在一个次数$\leq k$的多项式使得$S(n)=q^ng(n)-g(0)$(证明来自杜教的PPT) 设$f$的次数 ...
- 【树链剖分】【线段树】bzoj3083 遥远的国度
记最开始的根为root,换根之后,对于当前的根rtnow和询问子树U而言, ①rtnow==U,询问整棵树 ②fa[rtnow]==U,询问除了rtnow所在子树以外的整棵树 ③rtnow在U的子树里 ...
- 【单调队列】【动态规划】bzoj3831 [Poi2014]Little Bird
f(i)=min{f(j)+(D(j)<=D(i))} (max(1,i-k)<=j<=i) 有两个变量,很难用单调队列,但是(引用): 如果fi<fj,i一定比j优秀.因为如 ...
- SSH学习——声明式事物管理(Spring)
1.什么是事物? 事务是一组操作的执行单元,相对于数据库操作来讲,事务管理的是一组SQL指令,比如增加,修改,删除等,事务的一致性,要求,这个事务内的操作必须全部执行成功,如果在此过程种出现了差错,比 ...
- 文件描述符与socket连接
每个进程开启一个soeket连接,都会占用一个文件描述符. 1. 概述 在Linux系统中一切皆可以看成是文件,文件又可分为:普通文件.目录文件.链接文件和设备文件. 文件 ...
- Ubuntu 16.04使用rm -rf误删文件恢复方法收集
说明:不一定有效,需要不断尝试 一.lsof 文件刚刚被删除,想要恢复,先尝试lsof. lsof |grep data.file1 cp /proc/xxx/xxx/xx /dir/data.fil ...
- C++11的初始化列表
初始化是一个非常重要的语言特性,最常见的就是对对象进行初始化.在传统 C++ 中,不同的对象有着不同的初始化方法,例如普通数组.POD (plain old data,没有构造.析构和虚函数的类或 ...