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 ...
随机推荐
- Javascript 5种方法实现过滤删除前后所有空格
第一种:循环检查替换 //供使用者调用 function trim(s){ return trimRight(trimLeft(s)); } //去掉左边的空白 function trimLeft(s ...
- AppExtention - today
声明: 本文转自王巍 WWDC 2014 Session笔记 - iOS 通知中心扩展制作入门 本文是我的 WWDC 2014 笔记 中的一篇,涉及的 Session 有 Creating Exten ...
- SQL Server 修改排序规则
Net stop mssqlserver Setup /QUIET /ACTION=REBUILDDATABASE /instancename=mssqlserver /SQLSYSADMINACCO ...
- SpringMVC+Hibernate架构save方法事务未提交
今天同事遇到一个问题,一起研究,最后解决,让我对spring的事务管理又加深了印象. 先简单说一下项目:项目是Spring和Hibernate集成的JavaEE项目,MVC架构. 外包在service ...
- javascript中部分不能使用call apply调用来重写的构造函数
This tests if TypeError is thrown or not when we call a constructor as a normal function. On ...
- 解决Deprecated: preg_replace(): The /e modifier is deprecated, use
使用php5.5运行ecshop的时候出现如下错误Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace ...
- 什么是 DevSecOps？系列（一）
什么是 DevSecOps? 「DevSecOps」 的作用和意义建立在「每个人都对安全负责」的理念之上,其目标是在不影响安全需求的情况下快速的执行安全决策,将决策传递至拥有最高级别环境信息的人员. ...
- 为 UWP 应用提供的 .NET 网络 API
[编者按]本文作者是 Windows networking 团队项目经理 Sidharth Nabar.在微软 Build 2015 大会上,.NET Core 5 作为开发 UWP(Universa ...
- TSS 内核栈 用户栈的关系
http://blog.sina.com.cn/s/blog_673ef8130100qaje.html 该博客不错,有不少有用的信息 中断程序的一开始我们执行一个PUSHALL,把这些积存器保存在核 ...
- 【转】VC中对文件的读写
原文网址:http://www.cnblogs.com/LJWJL/archive/2012/10/06/2712466.html 注意: 1.由于C是缓冲写 所以要在关闭或刷新后才能看到文件内容 2 ...