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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？