layui选项卡的实现

秒速五厘米 2024-03-17 19:24 19阅读 0赞

**目录**

前言

模块加载名称： element一、element组件

1. element基础方法

2. 优化前端JSP页面

3. 引入头部hand.jsp页面

4. 优化后台主界面js

--------------------

## 前言 ##

在项目中我们需要编写许多页面，在页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换等操作。他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以在Layui框架中统一归类为element组件。跟表单一样，基于元素属性和事件驱动的接口书写方式。

## 模块加载名称： element   一、element组件    ##

### 1. element基础方法 ###

1. element基础方法  
基础方法允许你在外部主动对元素发起一起操作，目前element模块提供的方法如下：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <th>方法名</th> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>var element = layui.element;</td> 
   <td>element模块的实例<br> 返回的<em>element</em>变量为该实例的对象，携带一些用于元素操作的基础方法</td> 
  </tr> 
  <tr> 
   <td>element.on(filter, callback);</td> 
   <td>用于元素的一些事件监听</td> 
  </tr> 
  <tr> 
   <td>element.tabAdd(filter, options);</td> 
   <td> <p>用于新增一个Tab选项<br> 参数filter：tab元素的 lay-filter="value" 过滤器的值（value）<br> 参数options：设定可选值的对象，目前支持的选项如下述示例：</p> <p>element.tabAdd('demo', { </p> <p>title: '选项卡的标题'</p> <p>,content: '选项卡的内容' //支持传入html</p> <p>,id: '选项卡标题的lay-id属性值'</p> <p>});<br> &nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td>element.tabDelete(filter, layid);</td> 
   <td> <p>用于删除指定的Tab选项<br> 参数filter：tab元素的 lay-filter="value" 过滤器的值（value）<br> 参数layid：选项卡标题列表的 属性 lay-id 的值</p> <p>element.tabDelete('demo', 'xxx'); //删除 lay-id="xxx" 的这一项<br> &nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td>element.tabChange(filter, layid);</td> 
   <td> <p>用于外部切换到指定的Tab项上，参数同上，如：</p> 
    <blockquote> 
     <p><br> element.tabChange('demo', 'layid'); //切换到 lay-id="yyy" 的这一项</p> 
    </blockquote> </td> 
  </tr> 
  <tr> 
   <td>element.progress(filter, percent);</td> 
   <td>用于动态改变进度条百分比：<br> element.progress('demo', '30%');</td> 
  </tr> 
 </tbody> 
</table>

2. 更新渲染  
跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter) 方法即可。

注意：2.1.6 开始，可以用 element.render(type, filter); 方法替代

第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <th>参数（type）值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>tab</td> 
   <td>重新对tab选项卡进行初始化渲染</td> 
  </tr> 
  <tr> 
   <td>nav</td> 
   <td>重新对导航进行渲染</td> 
  </tr> 
  <tr> 
   <td>breadcrumb</td> 
   <td>重新对面包屑进行渲染</td> 
  </tr> 
  <tr> 
   <td>progress</td> 
   <td>重新对进度条进行渲染</td> 
  </tr> 
  <tr> 
   <td>collapse</td> 
   <td>重新对折叠面板进行渲染</td> 
  </tr> 
 </tbody> 
</table>

二、动态实现选项卡  
继 上篇博客 实现的导航栏，本篇实现点击左侧列表跳转到指定区域功能。

要求：  
点击左侧导航栏显示对象选项卡  
再次点击不会出现重复内容并跳转到指定区域  
可删除选项卡

1. 优化dao类  
继篇博客优化了menus方法。因为需要根据指定导航栏跳转到指定选项卡界面，而TreeVo节点构建类没有此属性，所以增加了map集合将对象保存起来，这样不管该对象内有多少属性TreeVo类的集合都能拿到。

package com.xzs.dao;
     
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
     
    import com.xzs.entity.Permission;
    import com.zking.util.BaseDao;
    import com.zking.util.BuildTree;
    import com.zking.util.PageBean;
    import com.zking.util.TreeVo;
     
    /**
     * @author 
     *
     * @2023年7月12日 上午11:11:54
     */
    public class PermissionDao extends BaseDao<Permission>{
     
    	/**
    	 * 获取数据库数据
    	 * @param p
    	 * @param pageBean
    	 * @return
    	 * @throws Exception
    	 */
    	public List<Permission> list(Permission p, PageBean pageBean) throws Exception {
    		String sql = "select * from t_oa_permission where 1=1";
    		return super.executeQuery(sql, Permission.class, pageBean);
    	}
    	
    	/**
    	 * 将数据库查询的平级数据，转换成有父子关系的数据
    	 * @param permission
    	 * @param pageBean
    	 * @return
    	 * @throws Exception
    	 */
    	public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception{
    		List<TreeVo<Permission>> list = new ArrayList<TreeVo<Permission>>();
    		//获取的数据库集合
    		List<Permission> per = this.list(permission, pageBean);
    		for (Permission p : per) {
    			TreeVo<Permission> vo = new TreeVo<>();
    			//设置节点类内容并添加到节点集合
    			vo.setId(p.getId()+"");//设置节点id 
    			vo.setText(p.getName()); //设置节点文本
    			vo.setParentId(p.getPid()+"");//设置父节点
    			//设置map集合存储permission对象
    			Map<String , Object> map = new HashMap<String, Object>();
    			map.put("self", p);
    			//将集合设置到vo对象中
    			vo.setAttributes(map);
    			list.add(vo);
    		}
    		
    		//返回节点构建好的数据
    		return BuildTree.buildList(list, "-1");
    	}
     
    }

### 2. 优化前端JSP页面 ###

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@include file="/common/head.jsp"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>OA系统管理主界面</title>
    <script src="static/js/main.js"></script>
    <style>
    /* 隐藏第一个tab标签删除图标 */
    .layui-tab-title>li:first-child>i {
    	display: none;
    }
    </style>
    </head>
    <body>
    	<div class="layui-layout layui-layout-admin">
    		<div class="layui-header">
    			<div class="layui-logo layui-hide-xs layui-bg-black">xzs会议OA系统</div>
    			
    			<ul class="layui-nav layui-layout-left">
    				
    				<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
    					lay-header-event="menuLeft"><i
    					class="layui-icon layui-icon-spread-left"></i></li>
    				
    				<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
    				<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
    				<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
    				<li class="layui-nav-item"><a href="javascript:;">nav
    						groups</a>
    					<dl class="layui-nav-child">
    						<dd>
    							<a href="">menu 11</a>
    						</dd>
    						<dd>
    							<a href="">menu 22</a>
    						</dd>
    						<dd>
    							<a href="">menu 33</a>
    						</dd>
    					</dl></li>
    			</ul>
    			
    			<ul class="layui-nav layui-layout-right">
    				<li class="layui-nav-item layui-hide layui-show-md-inline-block">
    					<a href="javascript:;"> <img
    						src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
    						class="layui-nav-img"> xzs
    				</a>
    					<dl class="layui-nav-child">
    						<dd>
    							<a href="">我的信息</a>
    						</dd>
    						<dd>
    							<a href="">会议</a>
    						</dd>
    						<dd>
    							<a href="login.jsp">退出</a>
    						</dd>
    					</dl>
    				</li>
    				<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
    					<a href="javascript:;"> <i
    						class="layui-icon layui-icon-more-vertical"></i>
    				</a>
    				</li>
    			</ul>
    		</div>
    		<div class="layui-side layui-bg-black">
    			<div class="layui-side-scroll">
    				
    				<ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu"></ul>
    			</div>
    		</div>
    		<div class="layui-body">
    			
    			<div style="padding: 15px;">
    				<div class="layui-tab" lay-filter="openTab" lay-allowclose="true">
    					<ul class="layui-tab-title">
    						<li class="layui-this" lay-id="-1">首页</li>
    					</ul>
    					<div class="layui-tab-content">
    						<div class="layui-tab-item layui-show">首页内容</div>
    					</div>
    				</div>
    			</div>
    			<div class="layui-footer">
    				
    				<div class="layui-footer" style="text-align: center;">
    					
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

### 3. 引入头部hand.jsp页面 ###

这里分装了需要导入的css、js和base标签

**作用：**

简化代码，因为每个页面都需要导入该内容，很繁琐。

base标签可以防止分离的js代码找不到指定路径

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    
    <link rel="stylesheet"
    	href="${pageContext.request.contextPath }/static/js/layui/css/layui.css" />
    
    <script
    	src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
    
    <base href="${pageContext.request.contextPath }/" />
    <input id="ctx" type="hidden" value="${pageContext.request.contextPath }">

### 4. 优化后台主界面js ###

/*扩大权限*/
    var element,layer,util,$;
     
    layui.use(['element', 'layer', 'util'], function(){
      element = layui.element
      ,layer = layui.layer
      ,util = layui.util
      ,$ = layui.$;
      
       $.post("${pageContext.request.contextPath}/permission.action?methodName=menus",
    	function(data){
    	//将json串转换成数组对象
    	var per = $.parseJSON(data);
    	//拼接左侧导航栏
    	var htmlStr = "";
    	$.each(per,function(i,n){
    		htmlStr+="<li class=\"layui-nav-item layui-nav-itemed\">";
    		htmlStr+="<a class='' href=\"javascript:;\">"+n.text+"</a>";
    		//判断如果子级是否有值
    		if(n.hasChildren){
    			var children = n.children;
    			//遍历子级内容
    			htmlStr+="<dl class=\"layui-nav-child\">";
    			$.each(children,function(i,n){
    				//在每个导航栏设置选项卡点击事件
    				htmlStr+="<dd><a href=\"javascript:;\" onclick=\"openTab('"+n.text+"','"+n.attributes.self.url+"','"+n.id+"')\">"+n.text+"</a></dd>";
    			})
    			htmlStr+="</dl>";
    		}
    		htmlStr+="</li>";
    	})
    	//替换原来标签内容
    	$("#menu").html(htmlStr);
    	//因为要修改之前元素的内容，防止数据出不来需要进行渲染结构传入目标容器的选择器和数据。
    	element.render("menu");
    })   
    });
     
    /*打开选项卡方法*/
    function openTab(title,url,id){
    	//获取选项卡元素
    	let $node = $("li[lay-id='"+id+"']");
    	//判断只有没有改元素使才添加
    	if($node.length == 0){
    		//定义增加选项卡组件
    		element.tabAdd('openTab', {
    	      title: title
    	      ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
    	      ,id: id
    	    })
    	}
    	element.tabChange('openTab', id); //切换到：用户管理
    }