zTree 實例

2024-04-27 15:18:48

字體：大中小

來源：轉載

供稿：網友

頁面：

<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"    }]