目录

什么是左侧导航？

案例实操：

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

什么是左侧导航？

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

    注：千万不要忘了加载 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代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


 <%@include file="/common/head.jsp" %>
  
  
  
  
  
  



  
    layui 后台布局

    

      

        
          
          贤心
        
        

          
基本资料
          
安全设置
        
      
      
退了
    
  
  
  
    
      
      

        
      
    
  
  
  
    
    内容主体区域
  
  
  
    
    © layui.com - 底部固定区域
  

封装代码的界面：head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setAttribute("ctx", request.getContextPath());
%>

3)编写实体类

package com.yian.layui.model;

import java.util.ArrayList;
import java.util.List;

public class Module {

	private Integer id;
	private Integer pid;
	private String name;
	private String icon;
	private String url;
	private Integer sort;
	
	private Listchildren=new ArrayList();

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public Integer getPid() {
		return pid;
	}

	public void setPid(Integer pid) {
		this.pid = pid;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getIcon() {
		return icon;
	}

	public void setIcon(String icon) {
		this.icon = icon;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public Integer getSort() {
		return sort;
	}

	public void setSort(Integer score) {
		this.sort = sort;
	}

	public List getChildren() {
		return children;
	}

	public void setChildren(List children) {
		this.children = children;
	}

	
	@Override
	public String toString() {
		return "Module [id=" + id + ", pid=" + pid + ", name=" + name + ", icon=" + icon + ", url=" + url + ", sort="
				+ sort + ", children=" + children + "]";
	}
	
	
}

4）编写Dao

IModuleDao

package com.yian.layui.dao;

import java.util.List;

import com.yian.layui.model.Module;

public interface IModuleDao {

	ListgetModules(Integer pid);
}

 ModuleDao

package com.yian.layui.dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.yian.layui.model.Module;
import com.zking.model.Student;
import com.zking.util.BaseDao;
import com.zking.util.BaseDao.ICovent;
import com.zking.util.PageBean;

public class ModuleDao implements IModuleDao {

	@Override
	public List getModules(Integer pid) {
		String sql = "select * from t_module where pid=? order by sort";
	    ArrayList