LayUI之动态选项卡Tab&iframe使用

目录

一、tab选项卡

二、登录功能实现

三、会议OA项目翻新

一、tab选项卡

步骤：

①、查找layui的选项卡页面布局代码--静态

将官网中任意一种选项卡的代码复制下来 ，粘贴到你要用的地方

  <div class="layui-body">
    <!-- 内容主体区域 -->
		<div class="layui-tab" lay-filter="demo"  lay-allowClose="true">
		  <ul class="layui-tab-title">
		    <li class="" lay-id="11">首页</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">1</div>
		  </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="openTab()">'+childern[index].text+'</a></dd>';
						})
						html +=' </dl>';
					}
					html +='</li>';
				});
				$("#menu").html(html);
			}
		})
	});
	 function openTab(){
		 element.tabAdd('demo', {
	        title: '新选项'+ (Math.random()*1000|0) //用于演示
	        ,content: '内容'+ (Math.random()*1000|0)
	        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
		 })
	 }
</script>

初步效果：

③、将选项卡名称换成菜单名

 js方法：

<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="openTab(\''+childern[index].text+'\',\''+childern[index].attributes.self.url+'\',\''+childern[index].id+'\')">'+childern[index].text+'</a></dd>';
						})
						html +=' </dl>';
					}
					html +='</li>';
				});
				$("#menu").html(html);
			}
		})
	});
	 function openTab(){
		 element.tabAdd('demo', {
	        title: '新选项'+ (Math.random()*1000|0) //用于演示
	        ,content: '内容'+ (Math.random()*1000|0)
	        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
		 })
	 }
	/*  
	1、查找layui的选项卡页面布局代码-静态
	2、动态的添加选项卡
	3、将选项卡名称换成菜单名
	*/ 
	function openTab(title,url,id){
		 // 新增一个Tab项
	     element.tabAdd('demo', {
			title : title,//用于演示
			content : url,
			id : id
	     }) 
	} 
</script>

然后我们 PermissionDao这个类也进行改动

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> executeQuery(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.executeQuery(permission,