LayUI动态加载左侧菜单以及tab组件的使用

文昊桑

已于 2023-07-13 12:34:12 修改

阅读量2k

点赞数 1

文章标签： layui 前端 javascript

于 2023-07-13 11:19:15 首次发布

本文链接：https://blog.csdn.net/m0_73329959/article/details/131697159

版权

本文介绍了如何使用layui框架在jsp页面中实现动态tab功能，当点击左侧菜单时，根据需求判断是否重复添加tab，并选中对应内容。同时展示了jsp、js代码示例，以及dao层和Servlet层的数据交互，用于获取和处理菜单数据。

摘要由CSDN通过智能技术生成

前言：

上一篇讲到了layui的基本入门使用，今天拓展一下layui的其他组件吧

需求：

点击左侧菜单，右侧显示对应的tab页面
当我点击的选项，已经在右侧存在时，不再重复添加tab，并且选中定位到相对应的tab

运行效果截图

源码

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理界面</title>
<script src="static/js/main.js" ></script>
<style>
	.layui-tab-title>li:first-child>i{
		display:none;
	}
	.layui-tab>.layui-tab-content{
		padding:0px;
	}
	body,html{
		padding:0px;
		margin:0px;
		overflow:hidden;
	}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">会议OA系统</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <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">
          牛马L
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="${pageContext.request.contextPath }/login.jsp">Sign out</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 class="layui-nav layui-nav-tree" lay-filter="test" id="layui_menus">
      </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>
  
  <div class="layui-footer" style="text-align: center;">
    <!-- 底部固定区域 -->
   Copyright ©  版权所有 W
  </div>
</div>
</body>
</html>

js代码

var layer,$,element;
layui.use(['jquery', 'layer', 'element'], function(){
	layer = layui.layer
	,$ = layui.jquery
	,element = layui.element;
	$.ajax({
		url:'Permission.action?methodName=menus'
		,dataType:'json'
		,success:function(data){
			var htmlstr = '';
			var json = $.parseJSON(data);
//			遍历拼接
			$.each(json,function(i,n){
				htmlstr += '<li class="layui-nav-item layui-nav-itemed">';
				htmlstr += ' <a class="" href="javascript:;">'+json[i].text+'</a>';
				if(json[i].hasChildren){
					var children = json[i].children;
					$.each(children,function(index,node){
						htmlstr += '<dl class="layui-nav-child">';
						htmlstr += '<dd><a href="javascript:;" onclick="openTab(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');" >'+children[index].text+'</a></dd>';
						htmlstr += '</dl>';
					});
				}
				htmlstr += '</li>';
			})
//			渲染代码
			$("#layui_menus").html(htmlstr);
		}
	});
	
});

function openTab(title,url,id){
//	获取相同id组件的长度
	var $node = $("li[lay-id='"+id+"']");
//	如果长度为0，代表没有这个tab
	if($node.length == 0){
//		那就添加这个tab
		element.tabAdd('openTab', {
	      title: title
	      ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
	      ,id: id
	    })
	}
//	否则就选中打开这个tab，根据id
	element.tabChange('openTab', id); 
	
	
}

dao层

package Dao;

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

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

import entity.t_oa_permission;

public class PermissionDao extends BaseDao<t_oa_permission>{

	
	public List<t_oa_permission> menu( t_oa_permission p, PageBean pageBean)
			throws Exception {
//		查询权限表中所有的数据
		String sql="select * from t_oa_permission";
		return super.executeQuery(sql, t_oa_permission.class, pageBean);
	}
	
	

	
//	将表中的数据装到另一个集合中
	public List<TreeVo<t_oa_permission>> menus(t_oa_permission t_oa_permission , PageBean pageBean)
			throws Exception {
		List<t_oa_permission> list = menu(t_oa_permission, pageBean);
		List<TreeVo<t_oa_permission>> treeVos = new ArrayList<TreeVo<t_oa_permission>>();
		for (t_oa_permission p : list) {
			TreeVo<t_oa_permission> vo = new TreeVo<>();
			vo.setId(p.getId()+"");
			vo.setParentId(p.getPid()+"");
			vo.setText(p.getName());
//			直接将p对象放到map集合中
			Map<String, Object> attributes = new HashMap<String, Object>();
			attributes.put("self", p);
			vo.setAttributes(attributes );
//			再将vo对象放进treevos的集合中，此时数据依旧是平级的，只不过是换了一个对象而已
			treeVos.add(vo);
		}
//		TreeVo<Permission> build = BuildTree.build(treeVos);
//		调用方法，根据id建立父子级关系
		List<TreeVo<t_oa_permission>> buildList = BuildTree.buildList(treeVos, "-1");
//		此时已经建立好了，返回集合
		return buildList;

	}
	
	
}

Servlet层

package Servlet;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;

import Dao.PermissionDao;
import entity.t_oa_permission;

public class PermissionServlet extends ActionSupport implements ModelDriver<t_oa_permission>{

	private t_oa_permission p= new t_oa_permission();
	private PermissionDao per= new PermissionDao();
	
	
	
	public void  menus(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		
//		调用方法
		List<TreeVo<t_oa_permission>> list = per.menus(p, null);
		ObjectMapper om= new ObjectMapper();
		ResponseUtil.writeJson(resp, om.writeValueAsString(list));

	}
	
	

	
	
	@Override
	public t_oa_permission getModel() {
		// TODO Auto-generated method stub
		return p;
	}

}

今日问答

疑问1

Java中 user u 和 user u=new user(); 有什么区别？

在Java中，"user u"和"user u=new User()"是两种不同的变量声明方式。

"user u"声明了一个user类型的变量u，但在该语句中，并没有为u分配内存空间，也没有初始化对象。这意味着变量u的值为null，如果在没有初始化的情况下使用u，将会导致空指针异常（NullPointerException）。

例子：

User u;
System.out.println(u); // 输出为null
u.method(); // 空指针异常

"user u = new User()"声明了一个user类型的变量u，并通过new关键字为其分配内存空间，并调用User类的构造函数进行初始化。这样就创建了一个新的User对象，并将其引用赋值给变量u。

例子：

User u = new User();
System.out.println(u); // 输出为User对象的内存地址
u.method(); // 正常调用User类的方法

总结：区别在于是否为变量分配内存空间和是否进行对象初始化。前者只是声明了一个变量，后者则是声明了一个变量并且创建了一个新的对象。因此，为了正常使用变量u，通常需要使用后者的方式，即通过new关键字创建对象。

疑问2：

为什么小编的右侧是404？

废话，我没有这个页面

疑问3：

$("#layui_menus").html(htmlstr);

这行代码是什么意思？重要嘛?

重要，这行代码起到动态渲染的效果，如果不写，可能导致页面不会动态加载，注意，是可能

今日金句（符合气质，绝对够金）

项目结构一定要对的上，比如看我下面这个图片

我的static存放的是静态资源

注意：如果我建立的jsp页面在根目录下，那么我的对应的js文件，也要在js这个根目录下，不能乱，否则就噶

欧克，今天的内容就到这里，下期见

文昊桑

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫