zTree 实例_dblclickexpand-CSDN博客

本文链接：https://blog.csdn.net/qq_29290295/article/details/54950728

页面：

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