快捷導(dǎo)航

Layui 后臺加載菜單欄名稱以及url的例子

更新時間：2019年09月04日 11:06:29 作者：newHESH

今天小編就為大家分享一篇Layui 后臺加載菜單欄名稱以及url的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

一個小小的demo，演示從Controller層傳參到視圖，有使用到SpringMvc、jstl標(biāo)簽

效果圖：

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">
 <!-- 注意：如果你直接復(fù)制所有代碼到本地，上述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">
 <!-- 側(cè)邊導(dǎo)航: <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" >默認(rèn)展開</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="">產(chǎn)品</a></li>
 <li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
 </ul>
<!-- 注意：如果你直接復(fù)制所有代碼到本地，上述js路徑需要改成你本地的 -->
 <script src="layui/layui.js"></script>
 <script>
 layui.use('element', function() {
 var element = layui.element; //導(dǎo)航的hover效果、二級菜單等功能，需要依賴element模塊 
 //監(jiān)聽導(dǎo)航點擊
 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") //從上一個頁面跳轉(zhuǎn)過來,如果只是看看效果直接輸入http://localhost:8080/項目名/testdemo
 public String Test(Model model)
 {
 List<List<String>>list1=new ArrayList();
 List<String> l1 = Arrays.asList("二級菜單1","二級菜單2","二級菜單3");//模擬獲得數(shù)據(jù)
 List<String> l2 = Arrays.asList("/url1","/url2","/url3");
 List<List<String>>list2=new ArrayList();
 List<String> l3 = Arrays.asList("三級菜單1","三級菜單2","三級菜單3","三級菜單4");//模擬獲得數(shù)據(jù)
 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的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: