Jquery zTree的使用
<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.02 Transitional//EN">
<html>
<head>
<title></title>
<script src="/zdxk/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/zdxk/js/jquery.ztree.core-3.5.js"></script>
<link href="/zdxk/css/css_right.css" rel="stylesheet" type="text/css">
<link href="/zdxk/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"
type="text/css">
<script type="text/javascript">
var setting = {
view : {
dblClickExpand : false,
showLine : true,
selectedMulti : false
},
callback : {
beforeClick : function(treeId, treeNode) {
alert("bbb");
var zTree = $.fn.zTree.getZTreeObj("tree");
alert("bbb");
$("#menuIframe").attr("src", treeNode.link);
alert("bbb");
return true;
}
}
};
var zNodes = [ {
id : "150000",
name : "内蒙古自治区卫计委",
link : "http://www.baidu.com",
children : [ {
id : "150100",
name : "呼和浩特市卫生局",
link : "v_child_list.do?diId=150100",
children : [ {
id : "141",
name : "123",
link : "v_update.do?id=141"
}, {
id : "150102",
name : "新城区卫生局",
link : "v_update.do?id=150102"
}, {
id : "150103",
name : "回民区卫生局",
link : "v_update.do?id=150103"
}, {
id : "150104",
name : "玉泉区卫生局",
link : "v_update.do?id=150104"
}, {
id : "150105",
name : "赛罕区卫生局",
link : "v_update.do?id=150105"
}, {
id : "150121",
name : "土默特左旗卫生局",
link : "v_update.do?id=150121"
}, {
id : "150122",
name : "托克托县卫生局",
link : "v_update.do?id=150122"
}, {
id : "150123",
name : "和林格尔县卫生局",
link : "v_update.do?id=150123"
}, {
id : "150124",
name : "清水河县卫生局",
link : "v_update.do?id=150124"
}, {
id : "150125",
name : "武川县卫生局",
link : "v_update.do?id=150125"
} ]
}, {
id : "152900",
name : "阿拉善盟卫生局",
link : "v_child_list.do?diId=152900",
children : [ {
id : "152921",
name : "阿拉善左旗卫生局",
link : "v_update.do?id=152921"
}, {
id : "152922",
name : "阿拉善右旗卫生局",
link : "v_update.do?id=152922"
}, {
id : "152923",
name : "额济纳旗卫生局",
link : "v_update.do?id=152923"
} ]
} ]
} ];
$(document).ready(function() {
alert("aaaa");
$.fn.zTree.init($("#tree"), setting, zNodes);
menuIframe = $("#menuIframe");
menuIframe.bind("load", loadReady);
});
function loadReady() {
var bodyH = menuIframe.contents().find("body").get(0).scrollHeight, htmlH = menuIframe
.contents().find("html").get(0).scrollHeight, maxH = Math.max(
bodyH, htmlH), minH = Math.min(bodyH, htmlH), h = menuIframe
.height() >= maxH ? minH : maxH;
if (h < 625)
h = 600;
menuIframe.height(h);
}
</script>
</head>
<body>
<table class="tab1" border="0">
<tr>
<td width=20% align=left valign=top
style="border-right: #999999 1px dashed">
<ul id="tree" class="ztree"
style="width:200px; min-height:550px;overflow:auto;">
</ul>
</td>
<td align=left valign=top width="80%"><iframe id="menuIframe"
name="menuIframe" frameborder=0 scrolling=auto width=100%
height="600px;" src="rcRevCatalogList2.action"></iframe></td>
</tr>
</table>
</body>
</html>
高级用法
<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.02 Transitional//EN">
<html>
<head>
<title></title>
<script src="/zdxk/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/zdxk/js/jquery.ztree.core-3.5.js"></script>
<link href="/zdxk/css/css_right.css" rel="stylesheet" type="text/css">
<link href="/zdxk/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"
type="text/css">
<script type="text/javascript">
var setting = {
view : {
dblClickExpand : false,
showLine : true,
selectedMulti : false
},
callback : {
beforeClick : function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
$("#menuIframe").attr("src", treeNode.link);
return true;
}
}
};
var zNodes = [
{
id : "150000",
name : "目录",
link : "http://www.baidu.com",
children : [
<c:forEach items="${rcRevCatalogList}" var="map" varStatus="status">
{
id : "150000",
name : "${map.rcRevCatalogName}",
link : "http://www.baidu.com",
children : [
<c:if test="${!empty (map.children)}">
<c:forEach items="${map.children}" var="child" varStatus="childstatus">
{
id : "150100",
name : "${child.rcRevCatalogName}",
link : "v_child_list.do?diId=150100",
children : [
<c:if test="${!empty (child.children)}">
<c:forEach items="${child.children}" var="childchild" varStatus="childchildstatus">
{
id : "150100",
name : "${childchild.rcRevCatalogName}",
link : "v_child_list.do?diId=150100",
children : [
<c:if test="${!empty (childchild.children)}">
<c:forEach items="${childchild.children}" var="childchildchild" varStatus="childchildchildstatus">
{
id : "150100",
name : "${childchildchild.rcRevCatalogName}",
link : "v_child_list.do?diId=150100",
children : [
]
}
<c:if test="${childchildchildstatus.index<(fn:length(childchild.children)-1 )}">
,
</c:if>
</c:forEach>
</c:if>
]
}
<c:if test="${childchildstatus.index<(fn:length(child.children)-1 )}">
,
</c:if>
</c:forEach>
</c:if>
]
}
<c:if test="${childstatus.index<(fn:length(map.children)-1 )}">
,
</c:if>
</c:forEach>
</c:if>
]
}<c:if test="${status.index<(fn:length(rcRevCatalogList)-1 )}">
,
</c:if>
</c:forEach>
]}];
var zNodes1 = [
{
id : "150000",
name : "内蒙古自治区卫计委",
link : "http://www.baidu.com",
children : [ /* {
id : "150100",
name : "呼和浩特市卫生局",
link : "v_child_list.do?diId=150100",
children : [ {
id : "141",
name : "123",
link : "v_update.do?id=141"
}, {
id : "150102",
name : "新城区卫生局",
link : "v_update.do?id=150102"
} ]
} */]
} ,{
id : "150000",
name : "内蒙古自治区卫计委",
link : "http://www.baidu.com",
children : [ {
id : "150100",
name : "呼和浩特市卫生局",
link : "v_child_list.do?diId=150100",
children : [ {
id : "141",
name : "123",
link : "v_update.do?id=141"
}, {
id : "150102",
name : "新城区卫生局",
link : "v_update.do?id=150102"
} ]
}]
} ];
$(document).ready(function() {
$.fn.zTree.init($("#tree"), setting, zNodes);
menuIframe = $("#menuIframe");
menuIframe.bind("load", loadReady);
});
function loadReady() {
var bodyH = menuIframe.contents().find("body").get(0).scrollHeight, htmlH = menuIframe
.contents().find("html").get(0).scrollHeight, maxH = Math.max(
bodyH, htmlH), minH = Math.min(bodyH, htmlH), h = menuIframe
.height() >= maxH ? minH : maxH;
if (h < 625)
h = 600;
menuIframe.height(h);
}
</script>
</head>
<body>
<%-- <s:iterator value="rcRevCatalogList" var="catelog">
<s:property value="rcRevCatalogName" />
</s:iterator>
<c:forEach items="${rcRevCatalogList}" var="map" varStatus="status"> ${status.index }${map.rcRevCatalogName} </c:forEach>
<c:forEach items="${rcRevCatalogList}" var="map" varStatus="status">
<c:if test="${!empty (map.children)}">${!empty (map.children)}
<c:forEach items="${map.children}" var="child" varStatus="childstatus">${child.rcRevCatalogName}
</c:forEach>
</c:if>
</c:forEach>
${fn:length(rcRevCatalogList)} --%>
<table class="tab1" border="0">
<tr>
<td width=20% align=left valign=top
style="border-right: #999999 1px dashed">
<ul id="tree" class="ztree"
style="width:200px; min-height:550px;overflow:auto;">
</ul></td>
<td align=left valign=top width="80%"><iframe id="menuIframe"
name="menuIframe" frameborder=0 scrolling=auto width=100%
height="600px;" src="rcRevCatalogList2.action"></iframe>
</td>
</tr>
</table>
</body>
</html>
Jquery zTree的使用的更多相关文章
- C#使用Jquery zTree实现树状结构显示_异步数据加载
JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面: http://www.treejs.cn/v3/dem ...
- jQuery.zTree的跳坑记录
最近项目用到树型结构的交互,一开始并不打算选择zTree,为了项目进度我妥协了,这一妥协后果就是我进坑了,在2天的挣扎中,我终于跳出坑了,活了下来,有一些感慨纪录下来. 有一个业务场景需要2个树型结构 ...
- JQuery ztree 异步加载实践
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...
- jQuery+zTree加载树形结构菜单
jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...
- jquery zTree 查找所有的叶子节点
jquery zTree 查找所有的叶子节点 // 保存所有叶子节点 10 为初始化大小,并非数组上限 var arrayObj = new Array([10]); /* treeNode: 根节点 ...
- Jquery zTree结合Asp.net实现异步加载数据
zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...
- jQuery zTree v3.5 实例3 异步树
最终效果: 点击非叶子节点时,向后台发送请求,获取下级菜单 前台代码如下: <%@ page language="java" contentType="text/h ...
- jquery——zTree, 完美好用的树插件
Demo 这绝对是我见过最完美的tree了,尽管是国产货,但一点不输国外产品,国外的还没有见过这么强的. _______________________________________________ ...
- jquery Ztree v3.5 实例2 自定义显示在节点前的图片
显示效果如下: 代码如下: <html> <head><title></title></head> <script type=&quo ...
随机推荐
- 认识HTML
基本框架: 1 <html> 2 <head> 3 <title>This Is Title</title> 4 </head> 5 6 & ...
- 《深入理解javascript原型和闭包系列》 知识点整理
深入理解javascript原型和闭包系列 对原型和闭包等相关知识的讲解,由浅入深,通俗易懂,每个字都值得细细研究. 一.一切都是对象 1. typeof操作符输出6种类型:string boolea ...
- 试求由a，b，c三个字母组成的n位符号串中不出现aa图像的符号串的数目
1.错误解法 共3^n,含aa的共3^(n-2),那么相减8*3^(n-2). 分析:aa的左右两边不能是a,所以结果肯定大了. 2.正确解法 假设符合条件的符合串 ...
- MongoDB实战指南(三)：MongoDB的锁机制
与关系数据库一样,MongoDB也是通过锁机制来保证数据的完整性和一致性,MongoDB利用读写锁来支持并发操作,读锁可以共享写锁具有排他性.当一个读锁存在时,其他读操作也可以用这个读锁:但当一个写锁 ...
- [jobdu]树的子结构
判断一棵树B是否是A的子树,对A做DFS,然后不断判断是否和B相同. 其实也可以不对A做DFS,直接遍历A中的每个节点和B做树的比较就行了. #include <iostream> #in ...
- 怎样在WINDOWS下面编译LIBCURL
我测试过,好像没OK This is a short note about building cURL with SSL support on Windows. Tools required: cUR ...
- 二层安全之MAC Flooding解析与解决方法
一.了解MAC Flooding原理 1.1 如图所示,网络中有3个PC和一个交换机,在正常情况下,如果PC A向PC B发送信息,PC C是不会知道的,过程都通过中间的交换机进行透明的处理,并且会记 ...
- Android 设置按钮为透明
设置一个按钮为透明, (1)修改配置文件 <Button android:id="@+id/btnAppMore" android:layout_width="wr ...
- DesignPatterns
1.设计模式,说明工厂模式. 总共23种,分为三大类:创建型,结构型,行为型 创建型 1. Factory Method(工厂方法) 2. Abstract Factory(抽象工厂) 3. Bui ...
- vim解决中文显示乱码问题
命令:vim ~/.vimrc 写入如下: set enc=utf-8 set fileencoding=utf-8 set fileencodings=ucs-bom,utf8,prc set gu ...