Layui 后台加载菜单栏名称以及url的例子

一个小小的demo，演示从Controller层传参到视图，有使用到SpringMvc、jstl标签

效果图：

1、testdemo.jsp

<%@ page language="java" import="java.util.*"
 contentType="text/html; charset=utf-8" pageEncoding="utf-8"
 isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
 content="width=device-width, initial-scale=1, maximum-scale=1">
 <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<link rel="stylesheet" href="${ pageContext.request.contextPath }/layui/css/layui.css" rel="external nofollow" media="all">
</head>
<body>
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
 <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
 <li class="layui-nav-item layui-nav-itemed"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >默认展开</a>
 <dl class="layui-nav-child">
 <c:forEach var="v" items="${itemname1[0]}" varStatus="i">
  <dd>
  <a href="${pageContext.request.contextPath}${itemname1[1].get(i.count-1)}" rel="external nofollow" rel="external nofollow" >${itemname1[0].get(i.count-1)}</a>
  </dd>
 </c:forEach>
 </dl></li>
 <li class="layui-nav-item"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >解决方案</a>
 <dl class="layui-nav-child">
 <dd>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" >后台模版</a>
  <dl class="layui-nav-child">
  <c:forEach var="s" items="${itemname2[0]}" varStatus="i">
  <dd>
  <a href="${pageContext.request.contextPath}${itemname2[1].get(i.count-1)}" rel="external nofollow" >${itemname2[0].get(i.count-1)}</a>
  </dd>
  </c:forEach>
  </dl>
 </dd>
 <dd>
  <c:forEach var="v" items="${itemname1[0]}" varStatus="i">
  <dd>
  <a href="${pageContext.request.contextPath}${itemname1[1].get(i.count-1)}" rel="external nofollow" rel="external nofollow" >${itemname1[0].get(i.count-1)}</a>
  </dd>
 </c:forEach>
 </dd>
 </dl></li>
 <li class="layui-nav-item"><a href="">产品</a></li>
 <li class="layui-nav-item"><a href="">大数据</a></li>
 </ul>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
 <script src="layui/layui.js"></script>
 <script>
 layui.use('element', function() {
 var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
 //监听导航点击
 element.on('nav(demo)', function(elem) {
 layer.msg(elem.text());
 });
 });
 </script>
</body>
</html>

2、TestController.java

@Controller
@Scope(value = "prototype")
@RequestMapping("/")
public class TestController {
 @RequestMapping(value="/testdemo") //从上一个页面跳转过来,如果只是看看效果直接输入http://localhost:8080/项目名/testdemo
 public String Test(Model model)
 {
 List<List<String>>list1=new ArrayList();
 List<String> l1 = Arrays.asList("二级菜单1","二级菜单2","二级菜单3");//模拟获得数据
 List<String> l2 = Arrays.asList("/url1","/url2","/url3");
 List<List<String>>list2=new ArrayList();
 List<String> l3 = Arrays.asList("三级菜单1","三级菜单2","三级菜单3","三级菜单4");//模拟获得数据
 List<String> l4 = Arrays.asList("/url1","/url2","/url3","/url4");
 list1.add(l1);
 list1.add(l2);
 list2.add(l3);
 list2.add(l4);
 model.addAttribute("itemname1",list1);
 model.addAttribute("itemname2",list2);
 return"testdemo";
 }
}

以上这篇Layui 后台加载菜单栏名称以及url的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui递归实现动态左侧菜单

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 我知道两种方式实现: 一.先加载所有的主菜单,之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过,那么动态添加了菜单,这里显示不出来,不判断的话,每次点击都会请求一次,这样请求的次数就太多了,服务器不太好的话可能会成为高并发的一个原因) 二.就是以下的了,使用递归一次性全部加载出来(缺点,耗费服务器内存) 如果动态添加一个菜单,你当前页面不手动刷新菜单不会显示,这个问题可以考虑用websock

  • layui添加动态菜单与选项卡

    layui添加动态菜单与选项卡

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <titl

  • Layui 后台加载菜单栏名称以及url的例子

    一个小小的demo,演示从Controller层传参到视图,有使用到SpringMvc.jstl标签 效果图: 1.testdemo.jsp <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false"%>

  • layui动态加载多表头的实例

    效果 动态生成header 返回的header数据:格式为数组,因为是二级表头,所以是二元数组 后台动态拼接数组,返回数组后把两个数组push到一个空数组中就可以组成一个动态的多级表头 var header= []; var header1= [{field: 'merchantName', title: '商户名称', width: 140, rowspan: 2},{field: 'merchantSubName', title: '子商户名称', width: 140, rowspan:

  • jquery dataTable 后台加载数据并分页实例代码

    使用 dataTable后台加载数据并分页.网上版本很多,但很多都是不能用或者不详细的,这里是已经验证过的. 引用 js文件 <script src="static/ace/js/jquery-2.0.3.min.js"></script> <script src="static/ace/js/jquery.dataTables.min.js"></script> <script src="static

  • layUI ajax加载html页面后重新渲染的方法

    相关问题同: 1.layUI使用jquery.load加载界面时,如何让layui渲染页面? 2.layUI ajax加载html页面后重新渲染 layUI ajax加载html页面后渲染,关键在将html插到指定位置后重新调用element.init();渲染 $.ajax({ url : url, type : 'GET', success : function(data) { $("#layui-tab-title").append("<li class='lay

  • layui异步加载table表中某一列数据的例子

    layui中table加载数据时 如果数据存放在不同数据表中 那样一个请求拼接每行表格数据 然后统一返回 太慢 //页面加载时请求 另一张表的数据 var slotGroup; admin.req({ url: '请求地址' , method: 'POST' , dataType: "json" , async: false , success: function (res) { slotGroup = res.data; console.log(slotGroup) } }); ta

  • 浏览器窗口滚动加载数据采用异步形式从后台加载数据

    以下滚动效果为在网上查找. 在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollLoadData.aspx.cs" Inherits="WebApplication1.ScrollLoadData" %> <!DOCTYPE html PUBL

  • 解决layui动态加载复选框无法选中的问题

    问题描述 1.最近用layui做后台界面,遇到layui跟ajax数据动态加载的checkbox,偶尔不能正常勾选,取消 2.有分页时,最后一页数据过少会导致其他页下方数据无法选中 3.页面没加载完或暴力测试时也会不能选中 利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况,但是暴力测试时偶尔还会出现,实在不知道什么原因,所以就用了一个折中的方法--自己写一个复选框 <!--原有layui复选框--> <td> <div class="la

  • layui 实现加载动画以及非真实加载进度的方法

    近期在做一个网站的查询功能,但是由于数据量确实太大,分页查询后也是很慢,同时查询出的数据部分还要进行一些处理,导致用户说要我们给他们加一个查询进度,要百分比显示.加上加载动画很简单,layui有现成的.但是还要动画..我tm(手动微笑),原谅我水平比较低.然后就瞎搞,终于搞出了一个加载的进度,虽然还是假的... 上面废话有点多,直接切入正题. 首先是html代码.....(不存在的2333333........) 然后是js代码: //这里是必须要有的,_index的作用是用来关闭遮罩,详细看l

  • thinkPHP+LayUI 流加载实现功能

    html <div class="layui-container" id="container"> </div> js,要引入layui.js layui.use('flow', function() { var $ = layui.jquery; var flow = layui.flow; flow.load({ elem: '#container' //流加载容器 //滚动条所在元素,一般不用填,此处只是演示需要. ,done: fun

  • Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

    Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

    背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! 出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当

随机推荐