treeview自定义菜单

最新推荐文章于 2024-07-28 00:41:46 发布

长不过执念，短不过善变

最新推荐文章于 2024-07-28 00:41:46 发布

阅读量374

点赞数 1

文章标签： treeview 递归 java jsp

本文链接：https://blog.csdn.net/weixin_44494406/article/details/103252864

版权

本文介绍了如何利用treeview、递归以及Java和jsp技术实现两种不同的自定义菜单效果。第一种实现包括css样式、HTML内容、script样式和后台代码的详细步骤。第二种实现则涵盖HTML代码，如菜单按钮组、添加菜单表单弹框和编辑菜单功能，并通过JS代码进行操作。

摘要由CSDN通过智能技术生成

treeview官网：https://www.bootcdn.cn/bootstrap-treeview/readme/#about

实现效果1：

在这里插入图片描述
1. css样式：

<link href="<%=request.getContextPath() %>/js/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath() %>/js/treeview/bootstrap-treeview.min.css" rel="stylesheet">

2. HTML内容：

<div id="tree"></div>

3. script样式

<script src="<%=request.getContextPath() %>/js/jquery-3.2.1.js"></script>
<script src="<%=request.getContextPath() %>/js/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/treeview/bootstrap-treeview.min.js"></script>


function initMenu(){
   
   		$.post("<%=request.getContextPath() %>/menu/queryMenu",function(result){
   
   			var tree = result;
   			$("#tree").treeview(
   		    		{
   
   		    			data:tree,
   		    			onNodeSelected: function (event,data) {
   
							if (data.href != "" && data.href != null) {
   
								var v_path = data.href;
								var v_text = data.text;
//									$.post('<%=request.getContextPath() %>'+v_path,function(result){
   
// 										$("#homeTitle").html(v_text);
// 										$("#home").html(result);
// 									})
									$("#homeTitle").html(v_text);
									$("#home iframe").attr("src",'<%=request.getContextPath() %>'+v_path);
							}    	    		    		
       		    		},
   		    		}
   		    	);
    		})
    	}

4. 后台代码

//controller控制层：
@RequestMapping("queryMenu")
@ResponseBody
public List<Menu> queryMenu(HttpSession session) {
   
	//取出登录后的用户信息
	User user = (User) session.getAttribute("userInfo");
	//根据用户id查询这个用户的菜单集合
	List<Menu> menuList = menuService.queryMenu(user.getUserId());
	return menuList;
}

//service业务逻辑层：（递归算法）:
public List<Menu> queryMenu(Integer userId) {
   
		Set<Menu> menuSet = new LinkedHashSet<Menu>();
		//查询这个用户的根节点----用linkedHash预防重复项并且顺序不会乱
		menuSet = menuDao.queryMenu(userId,SystemConstant.TREE_ROOT);
		//调用递归方法
		queryChildMenu(userId,menuSet);
		return new ArrayList<Menu>(menuSet);
	}
public void queryChildMenu(Integer userId,Set<Menu> menuSet) {
   
	for (Menu menu : menuSet) {
   
		Set