目录
一，选项卡1，查找layui的选项卡页面布局代码---静态
2，动态的添加选项卡
3，重复的选项卡不重复添加，改为选中
4，跳转页面
二，页面代码
一，选项卡
1，查找layui的选项卡页面布局代码---静态
在管网上选择选项卡：
复制代码：
element.tabAdd('demo', {title:'新选项'+(Math.random()*1000|0),//用于演示content:'内容'+(Math.random()*1000|0),id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下})
2，动态的添加选项卡
添加一个点击事件：
代码
let $,element;layui.use(['jquery','element'],function(){$ = layui.jquery,element = layui.element;$.ajax({url:'Permission.action?methodName=menus',dataType:'json',success:function(data){console.log(data);let htmlstr = '';$.each(data,function(i,n){htmlstr += ' <li class="layui-nav-item layui-nav-itemed">';htmlstr += ' <a class="" href="javascript:;">'+data[i].text+'</a>';//判断当前一级节点是否存在子节点if(data[i].hasChildren){htmlstr += '<dl class="layui-nav-child">';let children = data[i].children;$.each(data,function(index,node){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(htmlstr);}});});
点击方法
function openTab(title,url,id){//alert(1)let $node = $("li[lay-id='"+id+"']");if($node.length == 0){element.tabAdd('openTab', {title: title,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",id: id})}element.tabChange('openTab', id); //切换到：用户管理 }
效果（这张图是我敲完代码最后的完整图片，按道理现在的选项卡应该是一个随机数）：
3，重复的选项卡不重复添加，改为选中
function openTab(title,url,id){let $node = $("li[lay-id='"+id+"']");//新增一个Tab项if($node.length==0){element.tabAdd('demo', {title: title //用于演示,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",id: id //实际使用一般是规定好的id，这里以时间戳模拟下})}element.tabChange('demo',id);}
4，跳转页面
后台代码：
user:
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}@Overridepublic String toString() {return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";}}
userDao:
package com.zking.dao;import java.util.List;import com.zking.entity.User;import com.zking.util.BaseDao;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);//return super.executeQuery(sql, clz, pageBean);}}
userAction:
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 userdao = new UserDao();//写一个方法处理前台的请求//public String login(HttpServletRequest req,HttpServletResponse resp) {////Map<String, Object> map = new HashMap<String, Object>();//if("ruojuan".equals(user.getUsername())&& "1234567".equals(user.getPassword())) {////登陆成功//map.put("code", 200);//map.put("msg","登陆成功");//}//else {////登陆失败//map.put("code", 0);//map.put("msg","登陆失败");//}//try {//ResponseUtil.writeJson(resp, map);//} catch (Exception e) {//// TODO Auto-generated catch block//e.printStackTrace();//}////return super.execute(req, resp);//return null;////}public String login(HttpServletRequest req,HttpServletResponse resp) {try {User u = userdao.login(user);if(u !=null) {//登陆成功//ResponseUtil.writeJson(resp, new R().data("code",200).data("msg","登陆成功"));ResponseUtil.writeJson(resp,R.ok(200, "成功"));}else {//登陆失败//ResponseUtil.writeJson(resp, new R().data("code",0).data("msg","登陆失败"));ResponseUtil.writeJson(resp,R.error(0, "用户名或密码错误"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp,R.error(0, "用户名或密码错误"));} catch (Exception e1) {e1.printStackTrace();}}return null;}@Overridepublic User getModel() {// TODO Auto-generated method stubreturn user;}}
配置文件：
<?xml version="1.0" encoding="UTF-8"?><config><action path="/user" type="com.zking.web.UserAction"></action></config>
登陆界面：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!-- 导入文件 --><%@ include file = "commom/header.jsp" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/iconfont.css" type="text/css" media="all"><link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/login.css" type="text/css" media="all"><script src="static/js/login.js"></script><title>Insert title here</title><style> body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(static/images/bg.jpg) no-repeat 0 0;}</style></head><body class="tx-login-bg"><div class="tx-login-box"><div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div><ul class="tx-form-li row"><li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li><li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li><li class="col-24 col-m-24"><p class="tx-input-full"><button id="login" class="tx-btn tx-btn-big bg-black">登录</button></p></li><li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li><li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li></ul></div><script type="text/javascript"></script></body></html>
登陆界面封装的js：
layui.use(['jquery','layer'],function(){let $ = layui.jquery,layer = layui.layer;$("#login").click(function(){$.ajax({url:"user.action?methodName=login",dataType:'json',data:{loginName:$("#username").val(),pwd:$("#password").val()},success:function(data){//console.log(data);if(data.code == 200){layer.alert(data.msg,{icon:1})location.href = "mian.jsp";}else{layer.alert(data.msg,{icon:2})}}});});});
效果：
输入正确的密码
可以跳转界面
点击左侧菜单可以跳转页面：
二，页面代码
主界面：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@include file="commom/header.jsp" %><!DOCTYPE html ><html><head><script src="static/js/mian.js"></script></head><body class="layui-layout-body"><div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">layui 后台布局</div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用户</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">邮件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授权管理</a></dd></dl></li></ul><!-- 登录用户信息 --><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="/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: 15px;"><div class="layui-tab" lay-filter="demo" lay-allowclose="true"><ul class="layui-tab-title"><li class="layui-this" lay-id="-1">首页</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">首页内容</div></div></div></div></div><div class="layui-footer"><!-- 底部固定区域 -->© - 底部固定区域</div></div><script></script></body></html>
封装的主界面：
完整代码：
//JavaScript代码区域let $,element;layui.use(['jquery','element'], function(){$ = layui.jquery,element = layui.element;$.ajax({url:'${pageContext.request.contextPath }/permission.action?methodName=menus',dataType:'json',success:function(data){console.log(data);let htmlstr='';$.each(data,function(i,n){htmlstr +='<li class="layui-nav-item layui-nav-itemed">';htmlstr +='<a class="" href="javascript:;">'+data[i].text+'</a>';//判断节点是否存在子节点if(data[i].hasChildren){htmlstr +='<dl class="layui-nav-child">';let children = data[i].children;$.each(children,function(index,node){//htmlstr +='<dd><a href="javascript:;" onClick="openTabs();">'+children[index].text+'</a></dd>';htmlstr +='<dd><a href="javascript:;" onClick="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');">'+children[index].text+'</a></dd>';});htmlstr +='</dl>';}htmlstr +='</li>';});$("#menu").html(htmlstr);}});});/** 1，查找layui的选项卡页面布局代码---静态* 2，动态的添加选项卡* 3，将选项卡名称换成菜单名* 4，重复的选项卡不重复添加，改为选中* 5，跳转页面*/function openTabs(title,url,id){let $node = $("li[lay-id='"+id+"']");//alert(title+"hkjdjhasj"+url+"adsa"+id);//新增一个tab项// element.tabAdd('demo', {// title:'新选项'+(Math.random()*1000|0),//用于演示// content:'内容'+(Math.random()*1000|0),// id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下// }) //新增一个Tab项if($node.length==0){element.tabAdd('demo', {title: title //用于演示,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",id: id //实际使用一般是规定好的id，这里以时间戳模拟下})}element.tabChange('demo',id);}
