LayUI之动态树

本期精彩:

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

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

目录

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

前台界面的搭建

数据库中对应的表结构

后台代码

2、动态选项卡的制作

参考实现步骤


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

前台界面的搭建

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

LayUI之动态树_第1张图片

 对应代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



  <%@include file="/common/head.jsp" %>
  


  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
内容1
内容2
内容3
内容4
内容5

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setAttribute("ctx", request.getContextPath());
%>










数据库中对应的表结构

对应的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 '模块信息表';

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

 LayUI之动态树_第2张图片

注: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 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 getChildren() {
		return children;
	}
	public void setChildren(List 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 getModules(int pid);
}

ModuleDao

public class ModuleDao implements IModuleDao {
	@Override
	public List 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 getModules(int pid);
}

ModuleService

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

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

LayUI之动态树_第3张图片

2、动态选项卡的制作

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

参考实现步骤

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

LayUI之动态树_第4张图片

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

LayUI之动态树_第5张图片

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



  
  
  <%@include file="/common/head.jsp" %>
  
  


  • 首页
首页内容区

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

LayUI之动态树_第6张图片

你可能感兴趣的:(LayUI,layui,前端,javascript)