简单左侧二级树形菜单

最新推荐文章于 2020-12-31 10:00:20 发布

Damionew

最新推荐文章于 2020-12-31 10:00:20 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/Damionew/article/details/80803054

版权

使用：SpringBoot，Mybatis，thymeleaf

简单的二级菜单，效果图：

数据库菜单脚本

create table `gra_menu` (
	`menuId` int (10),
	`name` varchar (30),
	`parentId` varchar (30),
	`url` varchar (300),
	`icon` varchar (30),
	`menuOrder` varchar (30),
	`menuLevel` varchar (30)
); 
insert into `gra_menu` (`menuId`, `name`, `parentId`, `url`, `icon`, `menuOrder`, `menuLevel`) values('1','功能菜单1',NULL,'',NULL,'0','1');
insert into `gra_menu` (`menuId`, `name`, `parentId`, `url`, `icon`, `menuOrder`, `menuLevel`) values('2','天气预报','1','/invoice',NULL,'0','2');
insert into `gra_menu` (`menuId`, `name`, `parentId`, `url`, `icon`, `menuOrder`, `menuLevel`) values('3','在线聊天室','1','/index',NULL,'1','2');
insert into `gra_menu` (`menuId`, `name`, `parentId`, `url`, `icon`, `menuOrder`, `menuLevel`) values('4','视频播放','1',NULL,NULL,'2','2');
insert into `gra_menu` (`menuId`, `name`, `parentId`, `url`, `icon`, `menuOrder`, `menuLevel`) values('5','相册','1','/photoalbum',NULL,'3','2');
insert into `gra_menu` (`menuId`, `name`, `parentId`, `url`, `icon`, `menuOrder`, `menuLevel`) values('6','飞机',NULL,NULL,NULL,'1','1');
insert into `gra_menu` (`menuId`, `name`, `parentId`, `url`, `icon`, `menuOrder`, `menuLevel`) values('7','客机','6',NULL,NULL,'1','2');
insert into `gra_menu` (`menuId`, `name`, `parentId`, `url`, `icon`, `menuOrder`, `menuLevel`) values('8','战斗机','6',NULL,NULL,'2','2');
insert into `gra_menu` (`menuId`, `name`, `parentId`, `url`, `icon`, `menuOrder`, `menuLevel`) values('9','运输机','6',NULL,NULL,'3','2');

创建Menu实体类

package com.damionew.model;

import java.util.List;

public class Menu {
	//菜单ID
	private String menuId;
	//菜单名称
	private String name;
	//父菜单ID
	private String parentId;
	//菜单url
	private String url;
	//菜单图标
	private String icon;
	//菜单顺序
	private int menuOrder;
	//子菜单
	private List<Menu> childMenus;
	
	public String getMenuId() {
		return menuId;
	}
	public void setMenuId(String menuId) {
		this.menuId = menuId;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getParentId() {
		return parentId;
	}
	public void setParentId(String parentId) {
		this.parentId = parentId;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public String getIcon() {
		return icon;
	}
	public void setIcon(String icon) {
		this.icon = icon;
	}
 
	public int getMenuOrder() {
		return menuOrder;
	}
	public void setMenuOrder(int menuOrder) {
		this.menuOrder = menuOrder;
	}
	public List<Menu> getChildMenus() {
		return childMenus;
	}
	public void setChildMenus(List<Menu> childMenus) {
		this.childMenus = childMenus;
	}
	
	
}

重要的是List<Menu> childMenus;

MyBatis写两个SQL分别查询父菜单和子菜单

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.damionew.mapper.MenuMapper">
	<select id="parentMenu" resultType="com.damionew.model.Menu">
		SELECT * FROM gra_menu WHERE menuLevel = "1" order by menuOrder
	</select>
	
	<select id="childMenu" resultType="com.damionew.model.Menu">
		SELECT * FROM gra_menu WHERE parentId = #{parentId} order by menuOrder
	</select>
</mapper>

/**
 * @author yinyunqi
 * @datetime 2018年6月23日
 * @Content 
 */
package com.damionew.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.damionew.model.Menu;

@Mapper
public interface MenuMapper {
	public List<Menu> parentMenu();
	
	public List<Menu> childMenu(String parentId); 
}

在MenuService中处理菜单

package com.damionew.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.damionew.mapper.MenuMapper;
import com.damionew.model.Menu;

@Service
public class MenuService {
	@Autowired
	MenuMapper menuMapper;
	public List<Menu> menuList(){
		//1.查询父菜单
		List<Menu> parentMenus = menuMapper.parentMenu();
		//2.遍历父菜单
		for(Menu menu: parentMenus ) {
			String parentId = menu.getMenuId();
			//3.根据父菜单id查询子菜单
			List<Menu> childMenus = menuMapper.childMenu(parentId);
			menu.setChildMenus(childMenus);
		}
		
		return parentMenus;
	}
}

controller中若使用JSON返回，则显示

/**
 * @author yinyunqi
 * @datetime 2018年6月23日
 * @Content 
 */
package com.damionew.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSONObject;
import com.damionew.model.Menu;
import com.damionew.service.MenuService;

@Controller
public class IndexController {
	
	@Autowired
	MenuService menuService;
	
	@ResponseBody
	@RequestMapping("/index")
	public String indexPage(Model model) {
		List<Menu> menuList = menuService.menuList();
		model.addAttribute("menuList", menuList);
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("menuList",menuList);
//		return "index";
		return jsonObject.toJSONString();
	}
}

json串如下，可以去解析并格式化

{"menuList":[{"childMenus":[{"menuId":"2","menuOrder":0,"name":"天气预报","parentId":"1","url":"/invoice"},{"menuId":"3","menuOrder":1,"name":"在线聊天室","parentId":"1","url":"/index"},{"menuId":"4","menuOrder":2,"name":"视频播放","parentId":"1"},{"menuId":"5","menuOrder":3,"name":"相册","parentId":"1","url":"/photoalbum"}],"menuId":"1","menuOrder":0,"name":"功能菜单1","url":""},{"childMenus":[{"menuId":"7","menuOrder":1,"name":"客机","parentId":"6"},{"menuId":"8","menuOrder":2,"name":"战斗机","parentId":"6"},{"menuId":"9","menuOrder":3,"name":"运输机","parentId":"6"}],"menuId":"6","menuOrder":1,"name":"飞机"}]}

{
    "menuList":[
        {
            "childMenus":[
                {
                    "menuId":"2",
                    "menuOrder":0,
                    "name":"天气预报",
                    "parentId":"1",
                    "url":"/invoice"
                },
                {
                    "menuId":"3",
                    "menuOrder":1,
                    "name":"在线聊天室",
                    "parentId":"1",
                    "url":"/index"
                },
                {
                    "menuId":"4",
                    "menuOrder":2,
                    "name":"视频播放",
                    "parentId":"1"
                },
                {
                    "menuId":"5",
                    "menuOrder":3,
                    "name":"相册",
                    "parentId":"1",
                    "url":"/photoalbum"
                }
            ],
            "menuId":"1",
            "menuOrder":0,
            "name":"功能菜单1",
            "url":""
        },
        {
            "childMenus":[
                {
                    "menuId":"7",
                    "menuOrder":1,
                    "name":"客机",
                    "parentId":"6"
                },
                {
                    "menuId":"8",
                    "menuOrder":2,
                    "name":"战斗机",
                    "parentId":"6"
                },
                {
                    "menuId":"9",
                    "menuOrder":3,
                    "name":"运输机",
                    "parentId":"6"
                }
            ],
            "menuId":"6",
            "menuOrder":1,
            "name":"飞机"
        }
    ]
}

取消controller注释，传入前台页面（thymeleaf引擎）

                        <li th:each="parentmenu : ${menuList}">
                            <a class="tooltip-tip ajax-load" th:title="${parentmenu.name}">
                                <i class="icon-document-edit"></i>
                                <span th:text="${parentmenu.name}"></span>
                            </a>
                            <ul>
                                <li th:each="childmenu : ${parentmenu.childMenus}">
                                    <a class="tooltip-tip2 ajax-load" th:href="${childmenu.url}"  th:title="${childmenu.name}" target="iframe">
                                    	<i class="entypo-doc-text"></i>
                                    	<span th:text="${childmenu.name}"></span>
                                    </a>
                                </li>
                            </ul>
                        </li>

Done，原来很简单