Layui之动态选项卡&iframe使用

目录

tab选项卡

 方法层:

实体类：User

web层：

登录界面代码：

---

tab选项卡

我们顺着上篇的博客内容，在那个基础上加一个选项卡，首先我们打开Layui的在线文档

网址如下：

Tab选项卡 - 在线演示 - Layuihttp://layui.org.cn/demo/tab.html官网代码如下：

 

动态选项卡步骤：

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

 传到前台的值：

 方法层:

package com.zking.dao;

import java.util.ArrayList;
import java.util.List;

import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.TreeVo;

public class PermissionDao extends BaseDao<Permission>{
//查询t_oa_permission表中的数据
	public List<Permission> list(Permission permission, PageBean pageBean) throws Exception {
		String sql="select * from t_oa_permission";
		return super.executeQuery(sql, Permission.class, pageBean);
	}
	public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception {
		List<TreeVo<Permission>> trees=new ArrayList<TreeVo<Permission>>();
		//从数据库中拿到的菜单数据，此时数据是平级的，不具备父子关系
		List<Permission> list =this.list(permission, pageBean);
		for (Permission p : list) {
			TreeVo<Permission> vo =new TreeVo<>();
			vo.setId(p.getId()+"");
			vo.setText(p.getName());//节点的名称
			vo.setParentId(p.getPid()+"");
			//将URl放入treevo中，但是treevo中又没有专门的url属性，此时可以整个Permission都放到map集合中，设置给treevo
			vo.setAttributes(new R().data("self", p));
			trees.add(vo);
		}
		return BuildTree.buildList(trees, "-1");
	}
}

 TreeVo:

package com.zking.util;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;


public class TreeVo<T> {
	/**
	 * 节点ID
	 */
	private String id;
	/**
	 * 显示节点文本
	 */
	private String text;
	/**
	 * 节点状态，open closed
	 */
	private Map<String, Object> state;
	/**
	 * 节点是否被选中 true false
	 */
	private boolean checked = false;
	/**
	 * 节点属性
	 */
	private Map<String, Object> attributes;

	/**
	 * 节点的子节点
	 */
	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();

	/**
	 * 父ID
	 */
	private String parentId;
	/**
	 * 是否有父节点
	 */
	private boolean hasParent = false;
	/**
	 * 是否有子节点
	 */
	private boolean hasChildren = false;

	public String getId() {
		return id;
	}

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

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public Map<String, Object> getState() {
		return state;
	}

	public void setState(Map<String, Object> state) {
		this.state = state;
	}

	public boolean isChecked() {
		return checked;
	}

	public void setChecked(boolean checked) {
		this.checked = checked;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<TreeVo<T>> getChildren() {
		return children;
	}

	public void setChildren(List<TreeVo<T>> children) {
		this.children = children;
	}

	public boolean isHasParent() {
		return hasParent;
	}

	public void setHasParent(boolean isParent) {
		this.hasParent = isParent;
	}

	public boolean isHasChildren() {
		return hasChildren;
	}

	public void setChildren(boolean isChildren) {
		this.hasChildren = isChildren;
	}

	public String getParentId() {
		return parentId;
	}

	public void setParentId(String parentId) {
		this.parentId = parentId;
	}

	public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.children = children;
		this.hasParent = isParent;
		this.hasChildren = isChildren;
		this.parentId = parentID;
	}

	public TreeVo() {
		super();
	}

}

优化后的 R:

package com.zking.util;

import java.util.HashMap;

public class R extends HashMap{
	public R data(String key, Object value) {
		this.put(key, value);
		return this;
	}
	
	public static R ok(int code, String msg) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg);
		return r;
	}
	
	public static R error(int code, String msg) {
		R r = new R();
		r.data("success", false).data("code", code).data("msg", msg);
		return r;
	}
	
	public static R ok(int code, String msg,Object data) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg).data("data", data);
		return r;
	}
	
	public static R ok(int code, String msg, long count, Object data) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
		return r;
	}
}

实体类：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
	}

	@Override
	public 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()+"'";
		//根据sql查询符合条件的用户，通常只会返回一条数据
		List<User> users = super.executeQuery(sql, User.class, null);
		return users == null || users.size() == 0 ? null : users.get(0);
	}
}

web层：

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();
//	写一个方法 处理前台的请求
	@Override
	public String execute(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, R.error(0, "用户名密码错误"));
		}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
			} catch (Exception e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}

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

}

登录界面代码：

 login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@include file="common/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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">
        <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>
<title>Insert title here</title>
</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">
            	layui.use(['jquery','layer'],function(){
            		let $=layui.jquery
            		,layer = layui.layer;
            		$("#login").click(function(){
            			$.ajax({
            				url:"${pageContext.request.contextPath}/user.action?methodName=login"
      						,dataType:'json'
      						,data:{
      							loginName:$("#username").val(),
      							pwd:$("#password").val()
      						}
      						,success:function(data){
      							if(data.code == 200){
      								layer.alert(data.msg,{icon: 1});
      								location.href='main.jsp';
      							}else{
      								layer.alert(data.msg,{icon: 2});
      							}      							
      						}
            			})			
            		});
            	});
            </script> 
    </body>
</html>

 界面：

 

优化后的主界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="common/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<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="static/images/彭于晏2.jpeg" 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">
         <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">会议管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">发布会议</a></dd>
            <dd><a href="javascript:;">我的会议</a></dd>
            <dd><a href="javascript:;">会议通知</a></dd>
            <dd><a href="">历史会议</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li> 
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="layui-tab" 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">内容1</div>
		  </div>
	</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script>
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+'\',\''+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.重复的tab选项卡不添加，改为选中
 	5.跳转页面
 */
 function openTabs(title,url,id){
	let $node = $("li[lay-id='"+id+"']");
	debugger;
	if($node.length == 0){
		//新增一个Tab项
		 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); 
}

</script>
</body>
</html>

界面如下：

 优化代码：将登录和主界面的script里面的方法封装到js中

在js文件里面建立两个js

 

 封装后：

 

 

公共common ：header.jsp

<%@ 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>

最后的效果也是一样的就不再展示了，咱们下次再见！