<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<html>
<head>
<title>jQuery treeview</title>
<LINK href="${ctx}/styles/manager/menu.css" type=text/css rel=stylesheet>
<link rel="stylesheet" href="${ctx}/js/qtree/jquery.treeview.css" />
<link rel="stylesheet" href="${ctx}/js/qtree/screen.css" />
<script src="${ctx}/js/qtree/lib/jquery.js" type="text/javascript"></script>
<script src="${ctx}/js/qtree/lib/jquery.cookie.js"
type="text/javascript"></script>
<script src="${ctx}/js/qtree/jquery.treeview.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#tree").treeview({
collapsed: true,
//animated: "slow",
control:"#sidetreecontrol",
prerendered: false,
persist: "location",///刷新后不保持原状态
unique:true ///当点击一个节点时其他节点关闭
});
})
</script>
<style type="text/css">
.lefthd {
background: #fff url(${ctx}/styles/manager/images/edit_leftbg1.png)
repeat-x 0 0;
height: 28px;
width: 100%;
margin-left: 2px;
margin-right: 2px;
margin-top: 5px;
margin-bottom: 5px;
width: 205px;
border: 1px solid : #6687ac;
}
.lefthd em {
display: block;
padding: 6px 0 0 34px;
font: bold 14px "宋体";
color: #ffffff;
background: url(${ctx}/styles/manager/images/edit_xitong.png) no-repeat
8px 5px;
}
</style>
</head>
<body style="background-color: #eff7fd;border: 1px solid #6687ac;margin-bottom: 5px;overflow: auto;">
<div id="main">
<div id="sidetree" >
<div class="lefthd">
<em id="name">${platformname}</em>
</div>
<!--
<div id="sidetreecontrol" class="treeview" style="display:none" >
<a href="?#">全部关闭</a> |
<a href="?#">全部打开</a>
</div>
-->
<ul class="treeview" id="tree">
${treestr}
</ul>
</div>
</div>
</body>
</html>
=============================================================
上面代码中的jquery.treeview.js ,...css等的可以直接在官网上进行下载.
对于 ${treestr} 我是在后台中进行拼接的,拼接的样子如下:
<li class="expandable">
<div class="hitarea expandable-hitarea"></div>
<span>单位基本信息</span>
<ul>
<li><a href='../collect/ent.do?method=viewMyInfo' target='fraMain'>单位信息</a></li>
<li><a href='../collect/entJyya.do' target='fraMain'>救援预案</a></li>
<li><a href='../collect/entImage.do?dangerType=ENT_DANGER_ENT' target='fraMain'>企业图片</a></li>
<li><a href='../collect/entDangerShjl.do?dangerType=ENT_DANGER_ENT' target='fraMain'>审核意见</a></li>
</ul>
</li>
<li class="expandable">
<div class="hitarea expandable-hitarea"></div>
<span>安全生产基本情况</span>
<ul>
<li>
<a href='../collect/entGszzjg.do' target='fraMain'>公司组织机构</a></li>
<li><a href='../collect/entAqgljg.do' target='fraMain'>安全管理机构</a></li>
<li><a href='../collect/entQyfzr.do' target='fraMain'>企业负责人</a></li>
<li><a href='../collect/entAqglry.do' target='fraMain'>安全管理人员</a></li>
</ul>
</li>