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

随机推荐

IndexedDB 增删改查简单的库
<!DOCTYPE html> <html> <head> <title></title> <script src="Ind ...
windows store app 拷贝文件到pc目录
(function () { "use strict"; WinJS.Binding.optimizeBindingReferences = true; var app = Win ...
ANGULAR 2 FOR REACT DEVELOPERS
Now that Angular 2 is in beta, the time has come for us to drop everything and learn something new, ...
WCF 消息压缩性能问题及解决方法
最近使用WCF作为通迅框架开发一套信息系统,系统使用传统C/S框架,系统有可能会部署在互联网上,因此决定对传输的数据进行GZIP压缩,原来在使用.NET Remoting时,可以使用插入自定义的Cha ...
FFT初步学习小结
FFT其实没什么需要特别了解的,了解下原理,(特别推荐算法导论上面的讲解),模板理解就行了.重在运用吧. 处理过程中要特别注意精度. 先上个练习的地址吧: http://vjudge.net/vjud ...
Android 设置按钮为透明
设置一个按钮为透明, (1)修改配置文件 <Button android:id="@+id/btnAppMore" android:layout_width="wr ...
AfxBeginThread和AfxEndThread+内存泄露
ref http://blog.csdn.net/kut00/article/details/4209680 启动线程: CWinThread* AfxBeginThread( 线程函数, this ...
OLEDB和ODBC的区别(优缺点)
ODBC是一种连接数据库的开放标准,OLEDB(对象链接和嵌入数据库)位于ODBC层与应用程序之间. 在你的ASP页面里,ADO是位于OLEDB之上的应用程序. 你的ADO调用先被送到OLEDB,然后 ...
hdu4662MU Puzzle
http://acm.hdu.edu.cn/showproblem.php?pid=4662 I+3*U模6为2或4的都可以一个U相当于3个I 而I只能1->2->4->8..如 ...
hduAnother Graph Game
http://acm.hdu.edu.cn/showproblem.php?pid=4647 很扯的一题将每条边的一半权值分给它所连的两个结点 #include <iostream> # ...

Jquery zTree的使用

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

随机推荐

热门专题