頁面：
<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" }]
新聞熱點
疑難解答
