LayUI之动态树

小阿飞_

已于 2022-07-26 18:58:28 修改

阅读量1.1k

点赞数 11

分类专栏： LayUI 文章标签： layui 前端 javascript

于 2022-07-25 16:33:03 首次发布

本文链接：https://blog.csdn.net/yifei_345678/article/details/125977079

版权

LayUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本期精彩：

1、使用LayUI中提供的后台布局代码，结合MySQL数据库，制作出左侧导航菜单栏

2、使用LayUI提供的选项卡组件，运用到左侧菜单栏中(通过点击左侧菜单实现动态打开选项卡Tab)

1、左侧导航菜单栏的制作

前台界面的搭建

使用LayUI中提供的后台布局框架搭建出的界面👇

对应代码👇

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <%@include file="/common/head.jsp" %>
  <script>
  layui.use(['layer','jquery','element'], function() {
	  let layer = layui.layer;
	  let $ = layui.jquery;
	  let element = layui.element;
	  $.ajax({
		  url: ctx+"/loginAction.action?methodName=index",
		  type: "get",
		  dataType: 'json',
		  success:function(resp) {
			  $.each(resp.data, function(index, val) {
				  let selected = index == 0 ? 'layui-nav-itemed' : '';
				  let li = $('<li class="layui-nav-item ' + selected + '"></li>');			  
				  li.append('<a class="" href="javascript:;"><i class="layui-icon '
				  		+ val.icon
				  		+ '" style="font-size:16px;margin-right:10px;"></i>' 
				  		+ val.name + '</a>');				  
				  let chidren=val.children;
				  let dl = $('<dl class="layui-nav-child"></dl>');
				  $.each(chidren, function(i, n) {
					  dl.append('<dd><a href="javascript:;">'+n.name+'</a></dd>');
				  });
				  li.append(dl);				  
				  $("#menu").append(li);
			  });
			  
			  //动态的生成菜单后，调用render方法进行重新渲染，可以使用init()方法进行初始化达到同样的效果
			  element.render('menu');
		  }
	  }); 
  });
  </script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 登录用户信息 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心</a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 0px;">
    	<div class="layui-tab" style="margin-top:0px;">
		  <ul class="layui-tab-title">
		    <li class="layui-this">网站设置</li>
		    <li>用户管理</li>
		    <li>权限分配</li>
		    <li>商品管理</li>
		    <li>订单管理</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">内容1</div>
		    <div class="layui-tab-item">内容2</div>
		    <div class="layui-tab-item">内容3</div>
		    <div class="layui-tab-item">内容4</div>
		    <div class="layui-tab-item">内容5</div>
		  </div>
		</div>
    </div>
  </div> 
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;  
});
</script>
</body>
</html>

<%@include file="/common/head.jsp" %>对应的代码👇

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setAttribute("ctx", request.getContextPath());
%>
<meta name="viewport" content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta http-equiv="Content-Language" content="zh-CN">
<link rel="stylesheet"  href="${ctx}/css/iconfont.css" type="text/css" media="all">
<link rel="stylesheet"  href="${ctx}/css/login.css" type="text/css" media="all">
<link rel="stylesheet"  href="${ctx}/js/layui/css/layui.css" type="text/css" media="all">
<link rel="stylesheet"  href="${ctx}/js/layui/css/layui.css" type="text/css" media="all">
<script type="text/javascript" src="${ctx}/js/layui/layui.js"></script>
<script>
var ctx = "${ctx}";
</script>

数据库中对应的表结构

对应的SQL代码👇

CREATE TABLE t_module(
   id INT NOT NULL PRIMARY KEY COMMENT '模块ID',
   pid INT NOT NULL COMMENT '模块PID',
   NAME VARCHAR(20) NOT NULL COMMENT '模块名称',
   icon VARCHAR(20) NULL COMMENT '模块图标',
   url VARCHAR(50) NULL COMMENT 'URL地址',
   sort INT DEFAULT 0 COMMENT '模块顺序'
) COMMENT '模块信息表';

测试数据(树表/自关联表/无限级分类表)👇

注：Pid为-1代表没有父节点，是根节点，icon代表对应的图标，url代表跳转的链接，sort代表菜单的先后顺序

后台代码

1、对应实体类

public class Module {
	private Integer id;
	private Integer pid;
	private String name;
	private String icon;
	private String url;
	private int sort;	
    //用于在Java中存放根目录的子目录
	private List<Module> children = new ArrayList<>();	
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public Integer getPid() {
		return pid;
	}
	public void setPid(Integer pid) {
		this.pid = pid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getIcon() {
		return icon;
	}
	public void setIcon(String icon) {
		this.icon = icon;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public int getSort() {
		return sort;
	}
	public void setSort(int sort) {
		this.sort = sort;
	}	
	public List<Module> getChildren() {
		return children;
	}
	public void setChildren(List<Module> children) {
		this.children = children;
	}
	@Override
	public String toString() {
		return "Module [id=" + id + ", pid=" + pid + ", name=" + name + ", icon=" + icon + ", url=" + url + ", sort="
				+ sort + "]";
	}
}

2、对应dao层

IModuleDao

public interface IModuleDao {
	List<Module> getModules(int pid);
}

ModuleDao

public class ModuleDao implements IModuleDao {
	@Override
	public List<Module> getModules(int pid) {		
		String sql = "select * from t_module where pid=?";		
		return DbTemplate.query(sql, new Object[] {pid}, Module.class);
	}	
}

3、对应biz层

IModuleService

public interface IModuleService {
	List<Module> getModules(int pid);
}

ModuleService

public class ModuleService implements IModuleService {	
	private IModuleDao dao = new ModuleDao();
	@Override
	public List<Module> getModules(int pid) {
		List<Module> list = dao.getModules(pid);		
		for(Module m: list) {
			if(null == m.getUrl() || "".equals(m.getUrl())) {
                //递归
				m.setChildren(getModules(m.getId()));
			}
		}		
		return list;
	}
}

最终效果(左侧导航栏的显示文字都来自于上面建立好了的数据库表中了)👇

2、动态选项卡的制作

Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持

参考实现步骤

先去官方文档中找到选项卡组件👇

再使用LayUI提供的选项卡组件的代码(根据提示找到你想要的选项卡的样式对应的代码)👇

结合使用JS、Ajax来实现对选项卡的动态控制👇

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <%@include file="/common/head.jsp" %>
  <style>
  #funcTab ul li:first-child i {
  	display:none;
  }
  </style>
  <script type="text/javascript">
  let element = null;
  let $ = null;
  layui.use(['layer','jquery','element'], function() {
	  let layer = layui.layer;
	  $ = layui.jquery;
	  element = layui.element;
	  $.ajax({
		  url: ctx + '/loginAction.action?methodName=index',
		  type: 'get',
		  dataType: 'json',
		  success: function(resp) {
	  $.each(resp.data, function(index, node){
				  let selected = index == 0 ? 'layui-nav-itemed' : '';
				  let li = $('<li class="layui-nav-item ' + selected + '"></li>');
				  
				  li.append('<a class="" href="javascript:;"><i class="layui-icon '
					  		+ node.icon
					  		+ '" style="font-size:16px;margin-right:10px;"></i>' 
					  		+ node.name + '</a>');				  
				  let chidren=node.children;
				  let dl = $('<dl class="layui-nav-child"></dl>');
				  $.each(chidren, function(i,n) {
					  dl.append('<dd><a href="javascript:openFuncTab(\''+n.name+'\',\''+n.id+'\',\''+n.url+'\');">'+n.name+'</a></dd>');
				  });
				  li.append(dl);			  
				  $("#menu").append(li);
			  });			  
			  element.render('menu');
		  }
	  })
  });
  function openFuncTab(name,id,url) {	  
	  let exit = $("li[lay-id='"+id+"']").length;
	  if(exit == 0) {
		  element.tabAdd('demo', {
	        title: name,
	        content: '<iframe frameborder="0" src="' + url+ '" scrolling="auto" style="width:100%;height:100%;"></iframe>',
	        id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	      }); 
		  
	  }
	  element.tabChange('demo', id);	  
  }
  </script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>   
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          	贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div> 
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu" class="layui-nav layui-nav-tree"  lay-filter="test">
     
      </ul>
    </div>
  </div>  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
    <!-- 功能选项卡B -->
    <div class="layui-tab" id="funcTab" lay-filter="demo" lay-allowclose="true">
	  <ul class="layui-tab-title">
	    <li class="layui-this" lay-id="11">首页</li>
	  </ul>
	  <div class="layui-tab-content">
	    <div class="layui-tab-item layui-show">首页内容区</div>
	  </div>
	</div>
    <!-- 功能选项卡E -->
    </div>
  </div>
    <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script src="../src/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element; 
});
</script>
</body>
</html>

将选项卡运用到上期的左侧菜单栏中(最终效果)👇