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 ...

随机推荐

自定义一个"花瓣"菜单－b
先来看一下效果 XLCircleMenu.gif 是不是觉得挺好玩的呀. 通过这篇文章你可以学到: 1.系统UITableView的部分设计思想 2.自定义控件常用设计思路 3.动画的具体使用 4.手 ...
poj 3373 Changing Digits (DFS + 记忆化剪枝+鸽巢原理思想)
http://poj.org/problem?id=3373 Changing Digits Time Limit: 3000MS Memory Limit: 65536K Total Submi ...
Angular js总结
之前看过一些angular js的相关技术文档,今天在浏览技术论坛的时候发现有问angular js是做什么用的? 于是有了一个想法,对于自己对angular js 的认知做一个总结. 总结: ang ...
SanDisk SecureAccess™ Software
买了一个sandisk 的u盘,配套软件有空可以研究一下. QuickStartGuide_SanDiskSecureAccessV2.0.pdf http://www.sandisk.com/pro ...
SPRING IN ACTION 第4版笔记-第八章Advanced Spring MVC-001- 配置SpringFlow(flow-executor、flow-registry、FlowHandlerMapping、FlowHandlerAdapter)
一. 1.Wiring a flow executor <flow:flow-executor id="flowExecutor" /> Although the fl ...
netsh命令
C:\Windows\System32>netsh interface ipv6 show address level=verbose 地址 ::1 参数-------------------- ...
Subline Text默认设置文件Preferences.sublime-settings—Default详解
Subline Text中,点击Preferences,选择Settings - Default 全部属性解析 // While you can edit this file, it's best t ...
mac 上iterm终端显示中文为乱码解决方案
1.首先需要去设置下iterm,的终端编码方式为utf-8 检查方案为:iterm - > perferences - > Terminal ->Character Encoding ...
深刻理解C#的传值调用和传引用调用
传值调用和传引用调用是几乎所有主流语言都会涉及到的问题,下面我谈谈我对C#中传值调用和传引用调用的理解. 1. 一般对C#中传值调用和传引用调用的理解如果传递的参数是基元类型(int,float等) ...
【转】【iOS知识学习】_视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear等的区别及用途
原文网址:http://blog.csdn.net/weasleyqi/article/details/8090373 iOS视图控制对象生命周期-init.viewDidLoad.viewWillA ...

Jquery zTree的使用

Jquery zTree的使用的更多相关文章

随机推荐

热门专题