LayUI之动态树、无限级分类

• 表结构参考

 

 小编来给大家讲解一下小编的表结构如何来进行无限级分类吧！pid字段如果是【 -1】就是 url必须要为空因为后端要用这个来判断，一级菜单，如果此菜单有下级菜单，下级菜单的pid必须是一级菜单的id对应，如果下级菜单还有子菜单的话 那么子菜单就和下级菜单的id对应，以此类推

后端代码

•  dao层

	public List<Module> listModule(Integer pid){
		//编写查询语句
		String sql="select id,pid,name,icon,url,sort from tb_module where pid="+pid+" ORDER BY sort";
		return this.query(sql, null, new CallPage<Module>() {

			@Override
			public List<Module> rsQuery(ResultSet rs) {
				try {
					return CommonUtils.toList(rs, Module.class);
				} catch (Exception e) {
					e.printStackTrace();
				}
				return null;
			}
		});
	}

•  biz层

	public List<Module> listModule(Integer pid) {
		//开始调用方法
		List<Module> listModule = imodule.listModule(pid);
		//遍历集合里面的值
		for (Module module : listModule) {
			//判断 路径是否等于空
			if(null==module.getUrl()||"".equals(module.getUrl())) {
				//赋值 给孩子节点
				module.setChildren(listModule(module.getId()));
			}
		}
		return listModule;
	}

•  核心前端代码

    <script type="text/javascript">
    	layui.use(['jquery','element'],function(){
    		let $=layui.jquery;
    		let ele=layui.element;
    	//发出请求
    	$.post('moduleAction.action',{"methodName":"listModule"},function(data){
    		if(data.success){
    			//获取集合数据
        		let d=data.data;
        		//遍历集合数据
        		$.each(d,function(index,node){
        			//判断 默认第一栏打开状态下标为0
        			let selected=index==0?'layui-nav-itemed':"";
        			//开始生成
        			let li=$('<li class="layui-nav-item '+selected+'"></li>');
        			//继续追加元素
        			li.append('<a class="" href="javascript:;">'+node.name+'</a>');
        			//判断子节点下面有没有子节点
        			let s=node.children;
        			 //判断长度是否大于0
        			if(s.length>0){
        				//长度大于0 说明有节点
        				let dl=$('<dl class="layui-nav-child"></dl>');
        				//遍历节点 children
        				$.each(s,function(i,v){
       					//继续追加
       					dl.append('<dd><a href="javascript:;">'+v.name+'</a></dd>');
        				});
        				//把dl给到li
        				li.append(dl);
        			};
        			//最终给到ul
        			$("#menu").append(li);//menu是ul的编号
        		});
        		//渲染
        		ele.render('menu');
        		//ele.init();
    		}
    	},"json");
    	});
    </script>

•  效果图

 

---