layui动态选项卡

目录

一、Tab选项卡的实现

二、 登录界面

三、js代码搬运

---

一、Tab选项卡的实现

动态Tab选项卡

     1）根据模块名称判断是否已经存在tab选项卡
     
     $(".layui-tab-title li[lay-id='" + name + "']").length > 0

     2）切换到指定选项卡
     element.tabChange('tabs', name);

     3）动态添加选项卡

     // 新增一个Tab项
     element.tabAdd('tabs', {
    title : name,
    content : tabContent,
    id : name
     })
     // 切换刷新
     element.tabChange('tabs', name);
 

<script type="text/javascript" >
	let $,element;
	layui.use(['jquery','element'],function(){
		let $ =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(data,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>';
						console.log(children[index].text);
						//alert(" index :"+index+"节点 "+node);
					});
						htmlstr += '</dl>';
					}
					
					htmlstr += '</li>';
				});
				$("#menu").html(htmlstr);  
			}
		});
		
		
	});
 
 
 
 
	
	
	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);
	}
	

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 PerissonDao extends