LayUI之选项卡组件

Kissship

已于 2023-10-16 16:20:38 修改

阅读量175

点赞数

文章标签： layui 前端 javascript

于 2023-07-12 22:10:53 首次发布

本文链接：https://blog.csdn.net/weixin_74263417/article/details/131689007

版权

1.完成选项卡功能

1.1二级菜单点击新增选项卡

在上篇博客我们已经完成了树形菜单的基础上我们就用昨天的代码为例子。上篇博客的网址:

Kissship的博客——LayUI之树形菜单https://blog.csdn.net/weixin_74263417/article/details/131668632?spm=1001.2014.3001.5501需求：

点击二级菜单时增加一张选项卡。

第一步：

去LayUI官网Copy一份新增add选项卡的点击事件代码，如下：

然后把触发事件用方法包裹起来放入，如下：

function openTab(){
			  element.tabAdd('demo', {
			        title: '新选项'+ (Math.random()*1000|0) //用于演示
			        ,content: '内容'+ (Math.random()*1000|0)
			        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
			      })
		}

紧接着我们把触发事件放进昨天的a标签中。如下：

加进去之后我们就能正常点击二级菜单添加选项卡了。

效果展示：

1.2将二级菜单的名称显示到选项卡上

先在PermissionDao类加上一个map集合：

Map<String, Object> map = new HashMap<String, Object>();
		map.put("self", p);
		vo.setAttributes(map);

加上了之后我们把点击二级菜单之后，二级菜单的信息传到触发事件中，先传参：

把前面的代码改成：

function openTab(title,content,id){
			  element.tabAdd('demo', {
			        title: title //用于演示
			        ,content: content
			        ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
			      })
		}

ok完成之后我们还需要在each中把之前的空位符修改，如下：

最后我们就可以尝试输出看有没有其他问题了，效果图如下：

好的我们已经将二级菜单的名称显示在了选项卡上。这时候博主的小手不安分，多点了一下"所有会议"，发现我们的选项卡列表又加了一张名为"所有会议"的选项卡！

没错，它们重复了！那么这就衍生出了第三点，我们还需进一步优化我们的代码，让选项卡不能是重复的。

1.3选项卡重复问题的解决

通过浏览器的开发者模式可以看到，第一次点击二级菜单的length为0，但是第二次点击同样的二级菜单它的length值却变成了1，即length值是在变动的，所以我们需要从二级菜单的length值入手解决问题，修改后的代码如下：

function openTab(title,content,id){
	 		var $node = $('li[lay-id="'+id+'"]');
	 		console.log($node);
	 		if($node.length == 0){//如果点击的二级菜单length为0，那么就能打开一个新的选项卡
	 			element.tabAdd('demo', {
			        title: title //用于演示
			        ,content: content
			        ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
			      })
	 		}
		}

这时我们就可以看一下效果了：

但是此时又有新的问题出现了，当我们已经添加过的选项卡所对应的二级菜单后，再次点击其他已经添加的二级菜单，我们的窗口主体部分并没有跳转到我们二次操作所对应的选项卡上，所以又衍生出了下一个问题，需要重名的选项卡在被点击时选中。

1.4重名选项卡在被点击时选中

这里在我们的LayUI官网上，可以看到解决问题的办法，如下：

接着我们把它copy到我们的触击事件中，如下：

接着我们再看一下问题解决没有，效果图如下：

最终代码如下：

main.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台主页</title>
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo layui-hide-xs layui-bg-black">狂牙大行动</div>
			<!-- 头部区域（可配合layui 已有的水平导航） -->
			<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>
				<!-- Top导航栏 -->
				<li class="layui-nav-item layui-hide-xs"><a href="">导航栏1</a></li>
				<li class="layui-nav-item layui-hide-xs"><a href="">导航栏2</a></li>
				<li class="layui-nav-item layui-hide-xs"><a href="">导航栏3</a></li>
				<li class="layui-nav-item"><a href="javascript:;">更多</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">用户主页
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">hi</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">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
				</ul>
			</div>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div class="layui-tab" lay-allowclose="true" lay-filter="demo">
  <ul class="layui-tab-title">
    <li class="layui-this">标签1</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容-1</div>
  </div>
</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			底部固定区域
		</div>
	</div>
	<script>
		//JS 
		var element,layer,util,$;
		layui
		.use(
		[ 'element', 'layer', 'util' ],
		function() {
		element = layui.element, layer = layui.layer, util = layui.util, $ = layui.$;
							$.ajax({
								url:"${pageContext.request.contextPath }/permission.action?methodName=menus",
								dataType:'json',
								success:function(data){
									console.log(data); 	
									var htmlStr = '';
									$.each(data,function(i,n){
										 htmlStr += '<li class="layui-nav-item layui-nav-itemed">';
										 htmlStr += '<a class="" href="javascript:;">'+n.text +'</a>';
										 if(n.hasChildren){
											 htmlStr += '<dl class="layui-nav-child">';
											var children = n.children;
											$.each(children,function(idx,node){
												htmlStr += '<dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text +'</a></dd>';
											})
											htmlStr += '</dl>';
										 }
										 htmlStr += '</li>';
									})
									$("#menu").html(htmlStr);
									element.render("menu");//渲染  不加的话样式可能出不来
								}
							});
						});
/**
 * 1.参考官网是否有控件/模块能够支撑完成对应功能---->静态
 * 2.将静态的选项卡转换成动态的选项卡
 * 3.将选项卡的标签名变成实际菜单名
 * 4.重名的选项卡不能打开新的
 * 5.点击重名的选项卡虽然没打开但是也没有在对应点击二级菜单的选项卡内，所以我们还需要重名的选项卡在被点击时选中
 */
		function openTab(title,content,id){
	 		var $node = $('li[lay-id="'+id+'"]');
	 		console.log($node);
	 		if($node.length == 0){//如果点击的二级菜单length为0，那么就能打开一个新的选项卡
	 			element.tabAdd('demo', {
			        title: title //用于演示
			        ,content: content
			        ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
			      })
	 		}
	 		 //切换到指定Tab项
	 	      element.tabChange('demo', id); //切换到指定选项卡
		}
	</script>
</body>
</html>

PermissionDao：

package com.zking.dao;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;

public class PermissionDao extends BaseDao<Permission> {
public List<Permission> list(Permission permission, PageBean pageBean) throws Exception {
	String sql = "select * from t_oa_permission";
	return super.executeQuery(sql, Permission.class, pageBean);
}

//将数据库查询出来的平级数据转换成父子数据
//把原本的平级关系对应的对象转成了能够构成父子TreeVo对象
public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception{
	List<TreeVo<Permission>> lst = new ArrayList<TreeVo<Permission>>();
	List<Permission> list = this.list(permission, pageBean);
	for (Permission p : list) {
		TreeVo<Permission> vo = new TreeVo<>();
		vo.setId(p.getId()+"");
		vo.setText(p.getName());
		vo.setParentId(p.getPid()+"");
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("self", p);
		vo.setAttributes(map);
		lst.add(vo);
	}
	return BuildTree.buildList(lst, "-1");
}
}

2.LayUI弹出层拓展

最后LayUI之选项卡组件就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

Kissship

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
LayUI之选项卡组件

但是此时又有新的问题出现了，当我们已经添加过的选项卡所对应的二级菜单后，再次点击其他已经添加的二级菜单，我们的窗口主体部分并没有跳转到我们二次操作所对应的选项卡上，所以又衍生出了下一个问题，需要重名的选项卡在被点击时选中。这时候博主的小手不安分，多点了一下"所有会议"，发现我们的选项卡列表又加了一张名为"所有会议"的选项卡！那么这就衍生出了第三点，我们还需进一步优化我们的代码，让选项卡不能是重复的。在上篇博客我们已经完成了树形菜单的基础上我们就用昨天的代码为例子。紧接着我们把触发事件放进昨天的a标签中。
复制链接

扫一扫