LayUI之动态树

最新推荐文章于 2024-06-21 15:41:18 发布

時宜

最新推荐文章于 2024-06-21 15:41:18 发布

阅读量864

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_62270300/article/details/125978728

版权

什么是左侧导航？

案例实操：

上篇文章完成登录功能，接下来我们来完成主页的左侧导航的动态实现。

什么是左侧导航？

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。

注：千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。

案例实操：

1) 数据导入

CREATE TABLE t_module(
   id INT NOT NULL PRIMARY KEY COMMENT '模块ID',
   pid INT NOT NULL COMMENT '模块PID',
   NAME VARCHAR(20) NOT NULL COMMENT '模块名称',
   icon VARCHAR(20) NULL COMMENT '模块图标',
   url VARCHAR(50) NULL COMMENT 'URL地址',
   sort INT DEFAULT 0 COMMENT '模块顺序'
) COMMENT '模块信息表';

SELECT * FROM t_module

INSERT INTO t_module(id,pid,NAME,icon,url,sort) VALUES
(10,-1,'书本管理','layui-icon-list',NULL,1),
(11,-1,'订单管理','layui-icon-cart',NULL,2),
(1001,10,'书本新增',NULL,'jsp/book/addBook.jsp',3),
(1002,10,'书本列表',NULL,'jsp/book/bookList.jsp',4),
(1101,11,'订单列表',NULL,'jsp/order/orderList.jsp',5);

无限级分类：父亲找儿子的过程，将对应的儿子放在父亲下面，形成树结构。（递归算法）

2）前台页面（可以去上篇layui文章提到的layui参考地址中去借鉴页面）

比如此次实现动态树页面就是上方代码，页面效果图如下

index.jsp代码如下：

<link rel="stylesheet" href="js/layui/css/layui.css">
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
 <%@include file="/common/head.jsp" %>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="js/layui/css/layui.css">
  <script src="js/layui/layui.js"></script>
  <script>
  layui.use(['jquery','element'],function(){
	
	    let $=layui.jquery;
	    let element=layui.element;
	    
	    $.ajax({
	    	  url: ctx+"/loginAction.action?methodName=index",
	    	  type:'get',
	    	  dataType:'json',
	    	  success:function(resp){
	    		  $.each(resp.data,function(index,val){

最低0.47元/天解锁文章

時宜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
LayUI之动态树

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。注千万不要忘了加载element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。...
复制链接

扫一扫