1200字范文 > LayUI-----动态选项卡

LayUI-----动态选项卡

时间：2023-04-11 10:33:00

相关推荐

LayUI-----动态选项卡

前言

一、动态选项卡

1、查找LayUI的选项卡页面布局代码

2、动态添加选项卡

3、将选项卡名称换成对应的菜单名

4、重复出现的tab选项卡不添加，改为选中

5、内置页面的跳转

二、登录功能优化

前言

上次我们分享了LayUI的动态树，既侧边菜单。做了这个功能总要有用吧，这次分享的内容就是基于上篇分享的内容进行完善。在点击侧边菜单时，新增选项卡、点击已有选项卡的菜单项更改选中。

一、动态选项卡

首先进行思路分析：

我们要用LayUI进行动态选项卡。步骤如下：
1、查找LayUI的选项卡页面布局代码
2、动态添加选项卡
3、将选项卡名称换成对应的菜单名
4、重复出现的tab选项卡不添加，改为选中
5、内置页面的跳转

1、查找LayUI的选项卡页面布局代码

<div class="layui-tab"><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. 高度默认自适应，也可以随意固宽。<br>2. Tab进行了响应式处理，所以无需担心数量多少。</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>

运用到案例中

代码展示：

<%@ 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" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></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="/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"><ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test"></ul></div></div><div class="layui-body"><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> </div><script type="text/javascript">layui.use(['jquery'],function(){let $ = layui.jquery;$.ajax({url:"${pageContext.request.contextPath}/permission.action?methodName=menus",dataType:'json',success:function(data){let html = '';$.each(data,function(i,n){html +='<li class="layui-nav-item layui-nav-itemed">';html +=' <a class="" href="javascript:;">'+data[i].text+'</a>';//判断当前一级节点是否存在节点if(data[i].hasChildren){html +=' <dl class="layui-nav-child">';let childern = data[i].children;$.each(childern,function(index,node){html+=' <dd><a href="javascript:;">'+childern[index].text+'</a></dd>';})html +=' </dl>';}html +='</li>';});$("#menu").html(html);}})}) </script></body></html>

效果演示：

2、动态添加选项卡

点击菜单时要动态生成tab选项卡。
需要给菜单添加点击事件，点击菜单时调用增加选项卡的方法。

示例代码：

<%@ 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" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></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="/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"><ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test"></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><script type="text/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){let html = '';$.each(data,function(i,n){html +='<li class="layui-nav-item layui-nav-itemed">';html +=' <a class="" href="javascript:;">'+data[i].text+'</a>';//判断当前一级节点是否存在节点if(data[i].hasChildren){html +=' <dl class="layui-nav-child">';let childern = data[i].children;$.each(childern,function(index,node){html+=' <dd><a href="javascript:;"onClick="openTabs()">'+childern[index].text+'</a></dd>';})html +=' </dl>';}html +='</li>';});$("#menu").html(html);}})}) function openTabs(){element.tabAdd('demo', {title: '新选项'+ (Math.random()*1000|0) //用于演示,content: '内容'+ (Math.random()*1000|0),id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下})}</script></body></html>

示例演示：

3、将选项卡名称换成对应的菜单名

在将选项卡名称换为对应的菜单名称的同时，将选项卡的内容等也进行更改。

看一下传过来的值里面是否含有title，url，id这三个数据，有的话就好办多了。

可以看到我们传过来的值有title和id，就差url，现在就需要想办法拿到url。

在数据库中可知这个菜单是有url的。

我们在permissionDao向前端返回了数据，看看有没有机会将url一并返回到前端。

可以看到我们返回的类型是treevo

而treevo中并没有url这个属性，我们可以将url存入节点属性中。

示例代码：

<%@ 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" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></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="/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"><ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test"></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><script type="text/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 html = '';$.each(data,function(i,n){html +='<li class="layui-nav-item layui-nav-itemed">';html +=' <a class="" href="javascript:;">'+data[i].text+'</a>';//判断当前一级节点是否存在节点if(data[i].hasChildren){html +=' <dl class="layui-nav-child">';let childern = data[i].children;$.each(childern,function(index,node){html+=' <dd><a href="javascript:;"onClick="openTabs(\''+childern[index].text+'\',\''+childern[index].attributes.self.url+'\',\''+childern[index].id+'\')">'+childern[index].text+'</a></dd>';})html +=' </dl>';}html +='</li>';});$("#menu").html(html);}})}) function openTabs(title,url,id){element.tabAdd('demo', {title: title,content: url,id: id})}</script></body></html>

示例效果展示：

4、重复出现的tab选项卡不添加，改为选中

<%@ 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" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></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="/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"><ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test"></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><script type="text/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 html = '';$.each(data,function(i,n){html +='<li class="layui-nav-item layui-nav-itemed">';html +=' <a class="" href="javascript:;">'+data[i].text+'</a>';//判断当前一级节点是否存在节点if(data[i].hasChildren){html +=' <dl class="layui-nav-child">';let childern = data[i].children;$.each(childern,function(index,node){html+=' <dd><a href="javascript:;"onClick="openTabs(\''+childern[index].text+'\',\''+childern[index].attributes.self.url+'\',\''+childern[index].id+'\')">'+childern[index].text+'</a></dd>';})html +=' </dl>';}html +='</li>';});$("#menu").html(html);}})}) function openTabs(title,url,id){let $node = $("#li[lay-id='"+id+"']");debugger;element.tabAdd('demo', {title: title,content: url,id: id})}</script></body></html>

从上图的对比可知，多次点击length会发生变化。

示例代码：

<%@ 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" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></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="/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"><ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test"></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><script type="text/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 html = '';$.each(data,function(i,n){html +='<li class="layui-nav-item layui-nav-itemed">';html +=' <a class="" href="javascript:;">'+data[i].text+'</a>';//判断当前一级节点是否存在节点if(data[i].hasChildren){html +=' <dl class="layui-nav-child">';let childern = data[i].children;$.each(childern,function(index,node){html+=' <dd><a href="javascript:;"onClick="openTabs(\''+childern[index].text+'\',\''+childern[index].attributes.self.url+'\',\''+childern[index].id+'\')">'+childern[index].text+'</a></dd>';})html +=' </dl>';}html +='</li>';});$("#menu").html(html);}})}) function openTabs(title,url,id){let $node = $("#li[lay-id='"+id+"']"); if($node.length == 0){element.tabAdd('demo', {title: title,content: url,id: id})}element.tabChange('demo',id);}</script></body></html>

效果展示：

5、内置页面的跳转

二、登录功能优化

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);return users == null || users.size() == 0 ? null : users.get(0);}}

package com.zking.web;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) {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) {// TODO Auto-generated catch blocke1.printStackTrace();}}return null;}@Overridepublic User getModel() {return user;}}

<%@ 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" "/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(${pageContext.request.contextPath }/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;//es6$("#login").click(function(){$.ajax({url:"${pageContext.request.contextPath}/user.action?methodName=login",dateType:'json',data:{loginName:$("#username").val(),pwd:$("#password").val()},success:function(data){console.log(data);if(data.code == 200){layer.alert(data.msg ,{icon:1});}if(data.code == 0){layer.alert(data.msg,{icon:2});}}})});})</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。