页面:
<body>
<div class="wrapper">
<div class="maps">
<div class="map">当前位置:</div>
<div class="links">
<a href="javascript:;">首页</a>
<span>></span>
<a href="javascript:;">菜单</a>
</div>
</div>
<div class="areas">
<div class="area-left fl">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="clear"></div>
</div>
</div>
</body>
JS、CSS:
<link rel="stylesheet" type="text/css" href="${StaticPath}css/common.css">
<link rel="stylesheet" type="text/css" href="${StaticPath}css/public.css">
<link rel="stylesheet" type="text/css" href="${StaticPath}css/zTreeStyle/zTreeStyle.css">
<script src="${StaticPath}js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="${StaticPath}js/zTree/jquery.ztree.core.js" type="text/javascript"></script>
<style type="text/css">
.area-left { width: 240px; top: 40px; position: absolute; left: 0px; bottom: 0px; border-right:1px solid #ddd;}
.area-right { position: absolute; right: 0px; left: 246px; bottom: 0px; top: 40px; }
.ztree li span.button.switch.level0 { visibility: hidden; width: 1px; }
.ztree li ul.level0 { padding: 0; background: none; }
</style>
<script type="text/javascript">
var setting = {
view: {
dblClickExpand: dblClickExpand
},
data: {
simpleData: {
enable: true,
pIdKey: "Pid",
idKey: "id"
},
key: {
checked: "CHECKED",
name:"name"
}
}
};
var zNodes = ${menu};
function dblClickExpand(id, treeNode) {
return treeNode.level > 0;
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
后台代码:
List<SysModule> smList = sysModuleService.getSysModuleList(queryMap);
String menustr="";
int i=0;
menustr+= "[";
for(SysModule sm:smList){
i++;
menustr+= "{";
menustr+="id:"+sm.getModCode()+",";
menustr+="Pid:"+sm.getParentCode()+",";
menustr+="name:\""+sm.getModName()+"\",";
if(sm.getParentCode().length()==3){
menustr+="url:\""+sm.getModPath()+"\",";
if(i!=smList.size()){
menustr+="target:\""+"listFrame"+"\"},";
}else{
menustr+="target:\""+"listFrame"+"\"}";
}
}else{
if(i<smList.size()){
menustr+="open:"+"true},";
}else{
menustr+="open:"+"false}";
}
}
}
menustr+="]";
result.addObject("menu", menustr);
获取到的结果集:
[
{
id: 1,
Pid: 0,
name: "根菜单1",
open: true
},
{
id: 111,
Pid: 1,
name: "一级菜单001",
open: true
},
{
id: 111111,
Pid: 111,
name: "二级菜单001001",
url: "null",
target: "listFrame"
},
{
id: 112,
Pid: 1,
name: "一级菜单002",
open: true
},
{
id: 112111,
Pid: 112,
name: "二级菜单002001",
url: "null",
target: "listFrame"
}
]