• LayUI-----动态选项卡

    目录

    前言

    一、动态选项卡

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

            2、动态添加选项卡

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

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

     5、内置页面的跳转

    二、登录功能优化

    前言

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

    一、动态选项卡

            首先进行思路分析：

    我们要用LayUI进行动态选项卡。步骤如下：

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

    2、动态添加选项卡

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

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

    5、内置页面的跳转

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

    1. <div class="layui-tab">
    2.   <ul class="layui-tab-title">
    3.     <li class="layui-this">网站设置li>
    4.     <li>用户管理li>
    5.     <li>权限分配li>
    6.     <li>商品管理li>
    7.     <li>订单管理li>
    8.   ul>
    9.   <div class="layui-tab-content">
    10.     <div class="layui-tab-item layui-show">
    11.       1. 高度默认自适应，也可以随意固宽。
    12.       <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    13.     div>
    14.     <div class="layui-tab-item">内容2div>
    15.     <div class="layui-tab-item">内容3div>
    16.     <div class="layui-tab-item">内容4div>
    17.     <div class="layui-tab-item">内容5div>
    18.   div>
    19. div>

    运用到案例中

    代码展示：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="common/header.jsp" %>
    4. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <title>Insert title heretitle>
    9. head>
    10. <body class="layui-layout-body">
    11. <div class="layui-layout layui-layout-admin">
    12.   <div class="layui-header">
    13.     <div class="layui-logo">layui 后台布局div>
    14.     
    15.     
    16.     <ul class="layui-nav layui-layout-right">
    17.       <li class="layui-nav-item">
    18.         <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心a>
    19.         <dl class="layui-nav-child">
    20.           <dd><a href="">基本资料a>dd>
    21.           <dd><a href="">安全设置a>dd>
    22.         dl>
    23.       li>
    24.       <li class="layui-nav-item"><a href="">退了a>li>
    25.     ul>
    26.     
    27.   div>
    28.   
    29.   <div class="layui-side layui-bg-black">
    30.     <div class="layui-side-scroll">
    31.       
    32.       <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
    33.       ul>
    34.     div>
    35.   div>
    36.   
    37.   <div class="layui-body">
    38.    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    39. 	  <ul class="layui-tab-title">
    40. 	    <li class="layui-this">网站设置li>
    41. 	    <li>用户管理li>
    42. 	    <li>权限分配li>
    43. 	    <li>商品管理li>
    44. 	    <li>订单管理li>
    45. 	  ul>
    46. 	  <div class="layui-tab-content">div>
    47. 	div>  
    48.  
    49.   div>
    50. <script type="text/javascript">
    51. 	 layui.use(['jquery'],function(){
    52. 		let $ = layui.jquery;
    53. 		$.ajax({
    54. 			url:"${pageContext.request.contextPath}/permission.action?methodName=menus",
    55. 			dataType:'json',
    56. 			success:function(data){
    57. 				let html = '';
    58. 				$.each(data,function(i,n){
    59. 					html +='
    60. ';
  • html +=' '+data[i].text+'';
  • //判断当前一级节点是否存在节点
  • if(data[i].hasChildren){
  • html +='
    ';
  • let childern = data[i].children;
  • $.each(childern,function(index,node){
  • html+='
    '+childern[index].text+'
    '    ;
  • })
  • html +=' ';
  • }
  • html +='
    • ';
  • });
  • $("#menu").html(html);
  • }
  • })
  • })
  • script>
  • body>
  • html>

    • 效果演示：

            2、动态添加选项卡

    点击菜单时要动态生成tab选项卡。

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

     

     示例代码：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="common/header.jsp" %>
    4. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <title>Insert title heretitle>
    9. head>
    10. <body class="layui-layout-body">
    11. <div class="layui-layout layui-layout-admin">
    12.   <div class="layui-header">
    13.     <div class="layui-logo">layui 后台布局div>
    14.     
    15.     
    16.     <ul class="layui-nav layui-layout-right">
    17.       <li class="layui-nav-item">
    18.         <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心a>
    19.         <dl class="layui-nav-child">
    20.           <dd><a href="">基本资料a>dd>
    21.           <dd><a href="">安全设置a>dd>
    22.         dl>
    23.       li>
    24.       <li class="layui-nav-item"><a href="">退了a>li>
    25.     ul>
    26.     
    27.   div>
    28.   
    29.   <div class="layui-side layui-bg-black">
    30.     <div class="layui-side-scroll">
    31.       
    32.       <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
    33.       ul>
    34.     div>
    35.   div>
    36.   
    37.   <div class="layui-body">
    38. 	  <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
    39. 		  <ul class="layui-tab-title">
    40. 		    <li class="layui-this" lay-id="11">首页li>
    41. 		  ul>
    42. 	  <div class="layui-tab-content">
    43. 	    <div class="layui-tab-item layui-show">内容1div>
    44. 	  div>
    45.   div>
    46. <script type="text/javascript">
    47. 	let $,element;
    48. 	 layui.use(['jquery','element'],function(){
    49. 		$ = layui.jquery,
    50. 		element = layui.element;
    51. 		$.ajax({
    52. 			url:"${pageContext.request.contextPath}/permission.action?methodName=menus",
    53. 			dataType:'json',
    54. 			success:function(data){
    55. 				let html = '';
    56. 				$.each(data,function(i,n){
    57. 					html +='
    58. ';
  • html +=' '+data[i].text+'';
  • //判断当前一级节点是否存在节点
  • if(data[i].hasChildren){
  • html +='
    ';
  • let childern = data[i].children;
  • $.each(childern,function(index,node){
  • html+='
    '+childern[index].text+'
    '    ;
  • })
  • html +=' ';
  • }
  • html +='
    • ';
  • });
  • $("#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存入节点属性中。

     示例代码：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="common/header.jsp" %>
    4. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <title>Insert title heretitle>
    9. head>
    10. <body class="layui-layout-body">
    11. <div class="layui-layout layui-layout-admin">
    12.   <div class="layui-header">
    13.     <div class="layui-logo">layui 后台布局div>
    14.     
    15.     
    16.     <ul class="layui-nav layui-layout-right">
    17.       <li class="layui-nav-item">
    18.         <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心a>
    19.         <dl class="layui-nav-child">
    20.           <dd><a href="">基本资料a>dd>
    21.           <dd><a href="">安全设置a>dd>
    22.         dl>
    23.       li>
    24.       <li class="layui-nav-item"><a href="">退了a>li>
    25.     ul>
    26.     
    27.   div>
    28.   
    29.   <div class="layui-side layui-bg-black">
    30.     <div class="layui-side-scroll">
    31.       
    32.       <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
    33.       ul>
    34.     div>
    35.   div>
    36.   
    37.   <div class="layui-body">
    38. 	  <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
    39. 		  <ul class="layui-tab-title">
    40. 		    <li class="layui-this" lay-id="11">首页li>
    41. 		  ul>
    42. 	  <div class="layui-tab-content">
    43. 	    <div class="layui-tab-item layui-show">内容1div>
    44. 	  div>
    45.   div>
    46. <script type="text/javascript">
    47. 	let $,element;
    48. 	 layui.use(['jquery','element'],function(){
    49. 		$ = layui.jquery,
    50. 		element = layui.element;
    51. 		$.ajax({
    52. 			url:"${pageContext.request.contextPath}/permission.action?methodName=menus",
    53. 			dataType:'json',
    54. 			success:function(data){
    55. 				console.log(data);
    56. 				let html = '';
    57. 				$.each(data,function(i,n){
    58. 					html +='
    59. ';
    60. 					html +=' '+data[i].text+'';
    61. 					//判断当前一级节点是否存在节点
    62. 					if(data[i].hasChildren){
    63. 						html +=' 
      ';
    64. 						let childern = data[i].children;
    65. 						$.each(childern,function(index,node){
    66. 							html+=' 
      text+'\',\''+childern[index].attributes.self.url+'\',\''+childern[index].id+'\')">'+childern[index].text+'
      '      ;
    67. 						})
    68. 						html +=' ';
    69. 					}
    70. 					html +='
      71. ';
    71. 				});
    72. 				$("#menu").html(html);
    73. 			}
    74. 		})
    75. 	}) 
    76. 	
    77. 	function openTabs(title,url,id){
    78. 		 element.tabAdd('demo', {
    79. 		        title: title
    80. 		        ,content: url
    81. 		        ,id: id
    82. 		      })
    83. 	 }
    84. script>
    85. body>
    86. html>

     

     示例效果展示：

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

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="common/header.jsp" %>
    4. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <title>Insert title heretitle>
    9. head>
    10. <body class="layui-layout-body">
    11. <div class="layui-layout layui-layout-admin">
    12.   <div class="layui-header">
    13.     <div class="layui-logo">layui 后台布局div>
    14.     
    15.     
    16.     <ul class="layui-nav layui-layout-right">
    17.       <li class="layui-nav-item">
    18.         <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心a>
    19.         <dl class="layui-nav-child">
    20.           <dd><a href="">基本资料a>dd>
    21.           <dd><a href="">安全设置a>dd>
    22.         dl>
    23.       li>
    24.       <li class="layui-nav-item"><a href="">退了a>li>
    25.     ul>
    26.     
    27.   div>
    28.   
    29.   <div class="layui-side layui-bg-black">
    30.     <div class="layui-side-scroll">
    31.       
    32.       <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
    33.       ul>
    34.     div>
    35.   div>
    36.   
    37.   <div class="layui-body">
    38. 	  <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
    39. 		  <ul class="layui-tab-title">
    40. 		    <li class="layui-this" lay-id="11">首页li>
    41. 		  ul>
    42. 	  <div class="layui-tab-content">
    43. 	    <div class="layui-tab-item layui-show">内容1div>
    44. 	  div>
    45.   div>
    46. <script type="text/javascript">
    47. 	let $,element;
    48. 	 layui.use(['jquery','element'],function(){
    49. 		$ = layui.jquery,
    50. 		element = layui.element;
    51. 		$.ajax({
    52. 			url:"${pageContext.request.contextPath}/permission.action?methodName=menus",
    53. 			dataType:'json',
    54. 			success:function(data){
    55. 				console.log(data);
    56. 				let html = '';
    57. 				$.each(data,function(i,n){
    58. 					html +='
    59. ';
    60. 					html +=' '+data[i].text+'';
    61. 					//判断当前一级节点是否存在节点
    62. 					if(data[i].hasChildren){
    63. 						html +=' 
      ';
    64. 						let childern = data[i].children;
    65. 						$.each(childern,function(index,node){
    66. 							html+=' 
      text+'\',\''+childern[index].attributes.self.url+'\',\''+childern[index].id+'\')">'+childern[index].text+'
      '      ;
    67. 						})
    68. 						html +=' ';
    69. 					}
    70. 					html +='
      71. ';
    71. 				});
    72. 				$("#menu").html(html);
    73. 			}
    74. 		})
    75. 	}) 
    76. 	
    77. 	function openTabs(title,url,id){
    78. 		 let $node = $("#li[lay-id='"+id+"']");
    79. 		 debugger;
    80. 		 element.tabAdd('demo', {
    81. 		        title: title
    82. 		        ,content: url
    83. 		        ,id: id
    84. 		      })
    85. 	 }
    86. script>
    87. body>
    88. html>

     

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

     

    示例代码：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="common/header.jsp" %>
    4. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <title>Insert title heretitle>
    9. head>
    10. <body class="layui-layout-body">
    11. <div class="layui-layout layui-layout-admin">
    12.   <div class="layui-header">
    13.     <div class="layui-logo">layui 后台布局div>
    14.     
    15.     
    16.     <ul class="layui-nav layui-layout-right">
    17.       <li class="layui-nav-item">
    18.         <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心a>
    19.         <dl class="layui-nav-child">
    20.           <dd><a href="">基本资料a>dd>
    21.           <dd><a href="">安全设置a>dd>
    22.         dl>
    23.       li>
    24.       <li class="layui-nav-item"><a href="">退了a>li>
    25.     ul>
    26.     
    27.   div>
    28.   
    29.   <div class="layui-side layui-bg-black">
    30.     <div class="layui-side-scroll">
    31.       
    32.       <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
    33.       ul>
    34.     div>
    35.   div>
    36.   
    37.   <div class="layui-body">
    38. 	  <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
    39. 		  <ul class="layui-tab-title">
    40. 		    <li class="layui-this" lay-id="11">首页li>
    41. 		  ul>
    42. 	  <div class="layui-tab-content">
    43. 	    <div class="layui-tab-item layui-show">内容1div>
    44. 	  div>
    45.   div>
    46. <script type="text/javascript">
    47. 	let $,element;
    48. 	 layui.use(['jquery','element'],function(){
    49. 		$ = layui.jquery,
    50. 		element = layui.element;
    51. 		$.ajax({
    52. 			url:"${pageContext.request.contextPath}/permission.action?methodName=menus",
    53. 			dataType:'json',
    54. 			success:function(data){
    55. 				console.log(data);
    56. 				let html = '';
    57. 				$.each(data,function(i,n){
    58. 					html +='
    59. ';
    60. 					html +=' '+data[i].text+'';
    61. 					//判断当前一级节点是否存在节点
    62. 					if(data[i].hasChildren){
    63. 						html +=' 
      ';
    64. 						let childern = data[i].children;
    65. 						$.each(childern,function(index,node){
    66. 							html+=' 
      text+'\',\''+childern[index].attributes.self.url+'\',\''+childern[index].id+'\')">'+childern[index].text+'
      '      ;
    67. 						})
    68. 						html +=' ';
    69. 					}
    70. 					html +='
      71. ';
    71. 				});
    72. 				$("#menu").html(html);
    73. 			}
    74. 		})
    75. 	}) 
    76. 	
    77. 	function openTabs(title,url,id){
    78.          let $node = $("#li[lay-id='"+id+"']");		 
    79.          if($node.length == 0){
    80. 			 element.tabAdd('demo', {
    81. 			        title: title
    82. 			        ,content: url
    83. 			        ,id: id
    84. 			      })
    85. 		 }
    86. 		 element.tabChange('demo',id);
    87. 		 
    88. 	 }
    89. script>
    90. body>
    91. html>

     效果展示：

     5、内置页面的跳转

    二、登录功能优化

    1. package com.zking.dao;
    2.  
    3. import java.util.List;
    4.  
    5. import com.zking.entity.User;
    6. import com.zking.util.BaseDao;
    7.  
    8. public class UserDao extends BaseDao{
    9. 	public User login(User user) throws Exception {
    10. 		String sql = "select * from t_oa_user where loginName = '"+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'";
    11. 		List users = super.executeQuery(sql, User.class,null);
    12. 		return users == null || users.size() == 0 ? null : users.get(0);
    13. 	}
    14. }
    1. package com.zking.web;
    2.  
    3. import javax.servlet.http.HttpServletRequest;
    4. import javax.servlet.http.HttpServletResponse;
    5.  
    6. import com.zking.dao.UserDao;
    7. import com.zking.entity.User;
    8. import com.zking.framework.ActionSupport;
    9. import com.zking.framework.ModelDriver;
    10. import com.zking.util.R;
    11. import com.zking.util.ResponseUtil;
    12.  
    13. public class UserAction extends ActionSupport implements ModelDriver{
    14. 	private User user = new User();
    15. 	private UserDao userDao = new UserDao();
    16. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
    17. 		try {
    18. 			User u = userDao.login(user);
    19. 			if(u != null) {
    20. //				ResponseUtil.writeJson(resp, new R()
    21. //						.data("code", 200)
    22. //						.data("msg","成功")
    23. //						);
    24. 				ResponseUtil.writeJson(resp, R.ok(200, "成功"));
    25. 			}else {
    26. //				/*ResponseUtil.writeJson(resp, new R()
    27. //						.data("code", 0)
    28. //						.data("msg","账户或密码错误")
    29. //						);*/
    30. 				ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误"));
    31. 				
    32. 			}
    33. 		} catch (Exception e) {
    34. 			e.printStackTrace();
    35. 			try {
    36. 				ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误"));
    37. 			} catch (Exception e1) {
    38. 				// TODO Auto-generated catch block
    39. 				e1.printStackTrace();
    40. 			}
    41. 		}
    42. 		return null;
    43. 	}
    44. 	
    45. 	@Override
    46. 	public User getModel() {
    47. 		return user;
    48. 	}
    49. 	
    50. }
    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3.     <%@ include file="common/header.jsp" %>
    4. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/iconfont.css" type="text/css" media="all">
    9. <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/login.css" type="text/css" media="all">
    10. <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>
    11. <title>Insert title heretitle>
    12. head>
    13. 	 <body class="tx-login-bg">
    14.         <div class="tx-login-box">
    15.             <div class="login-avatar bg-black"><i class="iconfont icon-wode">i>div>
    16. 				<ul class="tx-form-li row">
    17. 					<li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input">p>li>
    18. 					<li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input">p>li>
    19. 					<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>
    20. 					<li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册a>p>li>
    21. 					<li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码a>p>li>
    22. 				ul>
    23.             div>
    24.     	<script type="text/javascript">
    25.     		layui.use(['jquery','layer'],function(){
    26.     			let $ = layui.jquery,
    27.     			layer = layui.layer;//es6
    28.     			$("#login").click(function(){
    29.     					$.ajax({
    30.     					url:"${pageContext.request.contextPath}/user.action?methodName=login",
    31.     					dateType:'json',
    32.     					data:{
    33.     						loginName:$("#username").val(),
    34.     						pwd:$("#password").val()
    35.     					},
    36.     					success:function(data){
    37.     						
    38.     						console.log(data);
    39.     						if(data.code == 200){
    40.     							layer.alert(data.msg ,{icon:1});
    41.     						}
    42.     						if(data.code == 0){
    43.     							layer.alert(data.msg,{icon:2});
    44.     						}
    45.     					}
    46.     				})
    47.     			});
    48.     		})
    49.     	script>
    50.     body>
    51. html>

  • 相关阅读:
    Spring加载后置处理器方式之模板方法
    华硕天选1天选2天选3天选4天选air原厂预装出厂系统恢复安装教程方法
    连续词袋模型（Continous bag of words, CBOW）
    PMBOK第7版——「8大绩效域」解析
    压测——总结
    德鲁伊数据库连接池的使用
    Insert 1, Insert 2, Insert 3, ...
    git和github的入门操作
    JavaScript关于==隐式转换的判断
    Github 星标 57.9K！阿里巴巴 Java 面试突击汇总（全彩版）首次公开
  • 原文地址：https://blog.csdn.net/qq_62331938/article/details/125857622