LayUI之动态选项卡

目录

一，什么是Tab选项卡

二，响应式Tab

三，带删除的tab

四，动态tab

五，实现登录功能

---

一，什么是Tab选项卡

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

提供两个Tab选项卡的样式

 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
	  <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>
	</div>  

 （2）

<div class="layui-tab layui-tab-card">
	  <ul class="layui-tab-title">
	    <li class="layui-this">网站设置</li>
	    <li>用户管理</li>
	    <li>权限分配</li>
	    <li>商品管理</li>
	    <li>订单管理</li>
	  </ul>
	  <div class="layui-tab-content" style="height: 100px;">
	    <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 class="layui-tab-item">6</div>
	  </div>
	</div>

思路：

    1.查找layUI的选项卡页面布局代码-静态
    2.动态的添加选项卡
    3.将选项卡名称换成菜单名
    4.重复的tab选项卡不添加。改为选中
    5.跳转页面

二，响应式Tab

当容器的宽度不足以显示全部的选项时，即会自动出现展开图标

<效果图>

三，带删除的tab

 与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"

四，动态tab

1.根据模块名称判断是否已经存在tab选项卡

   $(".layui-tab-title li[lay-id='" + name + "']").length > 0

2.切换到指定选项卡

element.tabChange('tabs', name);

3.动态选项卡

新增一个tab项，在新增tab时定义的是方法，当想用layUI里面的值时，扩大作用域即可

如：以下代码中的element

let layer,$,element;
layui.use(['jquery', 'layer', 'element'], function(){
	layer = layui.layer
	,$ = layui.jquery
	,element = layui.element;
	$.ajax({
		url:'${pageContext.request.contextPath }/permission.action?methodName=menus'
		,dataType:'json'
		,success:function(data){
			let htmlstr = '';
			let json = data.data;
			$.each(json,function(i,n){
				htmlstr += '<li class="layui-nav-item layui-nav-itemed">';
				htmlstr += ' <a class="" href="javascript:;">'+json[i].text+'</a>';
				if(json[i].hasChildren){
					let children = json[i].children;
					$.each(children,function(index,node){
						htmlstr += '<dl class="layui-nav-child">';
						htmlstr += '<dd><a href="javascript:;" onclick="openTab(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');" >'+children[index].text+'</a></dd>';
						htmlstr += '</dl>';
					});
				}
				htmlstr += '</li>';
			})
			    $("#menu").html(str);
		}
		});
	});
	

	function openTab(url,title,id){
			//通过jQuery拿到对象
			let $node = $("li[lay-id='"+id+"']");
			//前端调试代码
			debugger;
			if($node.length == 0){
				//新增一个tab项
				element.tabAdd('demo',{
					title:title //用于演示
					,content:url
					,id:id //实际使用一般是规定的id，这里以时间
				})
			}
			element.tabChang('demo',id);
		}

4.切换tab项

demo为tab选项卡的lay-filter=" "，因为在切换选项卡时需要一个区域

解释：什么是lay-filter
事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。可以把它看作是一个ID选择器

element.tabAdd('demo',{
					title:title //用于演示
					,content:url
					,id:id //实际使用一般是规定的id，这里以时间
				})

五，实现登录功能

在实现功能前，需要真好相关准备工作

1，工具类

2.数据库中的表

 

3. 实体类里的数据类型要与与数据库的数据类型匹配上

<代码演示>

package com.zking.entity;

public class User {
    private Long id;

    private String name;

    private String loginName;

    private String pwd;

    private Long rid;

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getLoginName() {
		return loginName;
	}

	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public Long getRid() {
		return rid;
	}

	public void setRid(Long rid) {
		this.rid = rid;
	}

	public User() {
		super();
		// TODO Auto-generated constructor stub
	}

	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
    
    
}package com.zking.entity;

public class User {
    private Long id;

    private String name;

    private String loginName;

    private String pwd;

    private Long rid;

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getLoginName() {
		return loginName;
	}

	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public Long getRid() {
		return rid;
	}

	public void setRid(Long rid) {
		this.rid = rid;
	}

	public User() {
		super();
		// TODO Auto-generated constructor stub
	}

	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
    
    
}

准备工作做好后，开始写方法。之前的账号与密码都是固定的，以下代码为优化

package com.zking.dao;

import java.util.List;

import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;

public class UserDao extends BaseDao<User> {

	public User login(User user) throws Exception {
		String sql = "select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"'";
		List<User> users = super.executeQuery(sql, User.class, null);
		//根据sql查询符合条件的用户，通常只会返回一条数据
		return users == null || users.size() == 0 ? null:users.get(0);
	}
}

子控制器

package com.zking.web;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class UserAction extends ActionSupport implements ModelDriver<User>{

	private User user = new User();
	private UserDao ud = new UserDao();	
	
	//处理请求
	
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		Map<String, Object> map = new HashMap<String, Object>();
		try {
			User u = ud.login(user);
			//通过账户密码查到用户记录
			if(u!=null) {
//			ResponseUtil.writeJson(resp, new R().data("code",200).data("msg","成功"));
				ResponseUtil.writeJson(resp, R.ok(200,"成功"));
				req.getSession().setAttribute("user", u);
			}else {
			//ResponseUtil.writeJson(resp, new R().data("code",0).data("msg","账户或密码错误"));    
            //此处的方法给便捷，调用了工具类里的方法
			ResponseUtil.writeJson(resp, R.error(200, "失败"));
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(200, "失败"));
			} catch (Exception e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}

		}
		return null;
	}
	
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
		
		
		
		
	}
}

优化完后试试效果

当账号密码错误时会给予提示

 

排版优化

将公共部分放一个类

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/layui/css/layui.css">
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script>
<!-- 指定整个文件的根路径 -->
<base href="${pageContext.request.contextPath}/"/>
<title>玉渊工作室</title>

将页面中的js代码单独放入js文件里