treeview自定义菜单

标签: treeview  递归  java  jsp

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<Menu> menuChildSet = new LinkedHashSet<Menu>();
		//根据用户id和菜单id去查询    (菜单id根菜单的pid比较,这样就能查询到子节点!) 
		menuChildSet = menuDao.queryMenu(userId,menu.getNodeid());
		//判断set集合有无数据
		if (menuChildSet.size() > 0) {
			//有数据添加到菜单实体类的set集合中
			menu.setNodes(menuChildSet);
			//重新调用此方法     参数是查询出来的上一个菜单set集合
			queryChildMenu(userId,menuChildSet);
		}
	}
}

实现效果2:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
1. HTML代码:

treeview菜单按钮组

<!-- treeview菜单按钮组 -->
	<div class="btn-group-vertical" role="group" style="display:none;" id="disDiv">
	  		<button type="button" class="btn btn-default" onclick="addMenu();"><span class="glyphicon glyphicon-plus"></span> 新增</button>
	  		<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-minus-sign"></span> 删除</button>
			<button type="button" class="btn btn-default" onclick="toupdateMenu();"><span class="glyphicon glyphicon-edit"></span> 修改</button>
	</div>

添加菜单表单弹框

<!-- 菜单增加所需提交的表单 -->
	<div id="menuForm" style="display:none;left:35%;top:30%;position:absolute;width: 500px;border:red dashed 1px;">
			<div class="panel panel-success" style="padding:0;margin: 0;">
			  <div class="panel-heading">
			    <h3 class="panel-title">添加菜单表单 <span class="glyphicon glyphicon-remove-circle" style="float: right;cursor: pointer;"" οnclick="deleteMenu();"></span></h3>
			  </div>
			  <div class="panel-body">
				    	<form class="form-group">
				    	  <div class="form-group" style="display:block;margin-bottom: 15px;margin-left: 70px;">
						    <div class="input-group">
						      <div class="input-group-addon">父级节点</div>
						      <input type="hidden" name="parentid" id="parentid">
						      <input type="text" class="form-control" readonly="readonly" id="pnode">
						    </div>
						  </div>
						  <div class="form-group" style="display:block;margin-bottom: 15px;margin-left: 70px;">
						    <div class="input-group">
						      <div class="input-group-addon">菜单名称</div>
						      <input type="text" class="form-control" name="text" id="menuText" placeholder="请输入菜单名称">
						    </div>
						  </div>
						  <div class="form-group" style="display:block;margin-bottom: 15px;margin-left: 70px;">
						    <div class="input-group">
						      <div class="input-group-addon">菜单路径</div>
						      <input type="text" class="form-control" id="menuUrl" name="href" placeholder="请输入菜单路径">
						    </div>
						  </div>
						  <button type="button" class="btn btn-success" style="margin-left: 100px;" onclick="submitMenu();">确认提交</button>
						</form>
			  </div>
			</div>
	</div>

编辑菜单

<!-- 菜单修改所需要的表单 -->
	<div id="toupdatemenuForm" style="display:none;left:35%;top:30%;position:absolute;width: 500px;border:red dashed 1px;">
			<div class="panel panel-success" style="padding:0;margin: 0;">
			  <div class="panel-heading">
			    <h3 class="panel-title">编辑菜单表单 <span class="glyphicon glyphicon-remove-circle" style="float: right;" onclick="deleteMenu();"></span></h3>
			  </div>
			  <div class="panel-body">
						<div id="initDiv" style="display: block"></div>
						<div style="display: none" id="toupdateMenudis">
							
							
						<form class="form-group" id="toupdateForm">
							<input type="hidden" name="parentid" id="toupdatepid">
							<input type="hidden" name="nodeid" id="toupdatenodeid">
						  <div class="form-group" style="display:block;margin-bottom: 15px;margin-left: 70px;">
						    <div class="input-group">
						      <div class="input-group-addon">菜单名称</div>
						      <input type="text" class="form-control" name="text" id="toupdateMenuText" placeholder="请输入菜单名称">
						    </div>
						  </div>
						  <div class="form-group" style="display:block;margin-bottom: 15px;margin-left: 70px;">
						    <div class="input-group">
						      <div class="input-group-addon">菜单路径</div>
						      <input type="text" class="form-control" id="toupdateMenuUrl" name="href" placeholder="请输入菜单路径">
						    </div>
						  </div>
						  <button type="button" class="btn btn-success" style="margin-left: 100px;" onclick="submitToUpMenu();">确认提交</button>
						  <button type="button" class="btn btn-success" style="margin-left: 100px;" onclick="resetMenu();">重新选择</button>
						</form>
							
							
							
							
							
							
							
						</div>
			  </div>
			</div>
	</div>

2. JS代码

	//给treeview绑定事件并给移动隐藏的按钮组.
	//并且通过getNode获得节点内容赋值给指定的按钮组的框内,并设定右键菜单两秒之后消失。
	$("#tree").on("mousedown",'li',function(event){
    		//通过事件的which属性判断是不是右键点击
    		if (event.which == 3) {
    			var v_clientX = event.clientX;
    			var v_clientY = event.clientY;
				$("#disDiv").css({
					display:'block',
					position:'absolute',
					'left':v_clientX+3,
					'top':v_clientY-3
				});
				var nodeid = $(this).attr("data-nodeid");
	    		var node = $("#tree").treeview('getNode', nodeid);
	    		$("#parentid").val(node.nodeid);
	    		$("#pnode").val(node.text);
				setTimeout("$('#disDiv').css('display','none')",2000);
			}
    	})
	//禁用treeview的原生浏览器菜单:
	$("#tree").on("contextmenu",function(event){
   		return false;
   	});
	//新增菜单
   	function addMenu(){
   		$("#toupdatemenuForm").css("display","none");
   		$("#menuForm").css('display','block');
		$("#menuText").val("");
		$("#menuUrl").val("");
   	}
	//删除菜单界面
   	function deleteMenu(){
   		$("#menuForm").css('display','none');
   		$("#toupdatemenuForm").css("display","none");
   	}
	//修改的回显
   	function toupdateMenu(){
   		$("#initDiv").css("display","block");
		$("#toupdateMenudis").css("display","none");
   		$("#toupdatemenuForm").css("display","block");
   		$("#menuForm").css('display','none');
   		$.post("<%=request.getContextPath() %>/menu/queryMenu",function(result){
   			var tree = result;
   			$("#initDiv").treeview(
   		    		{
   		    			data:tree,
   		    			onNodeSelected: function (event,data) {
							if (data.href != "" && data.href != null) {
								var v_text = data.text;
							}
   		    			}
   		    		}
   		    );
   		    //选中节点
   			$("#initDiv").on('nodeSelected',function(event,data) {
   				$("#toupdatepid").val(data.parentid);
   				$("#toupdatenodeid").val(data.nodeid);
   				$("#toupdateMenuText").val(data.text);
   				$("#toupdateMenuUrl").val(data.href);
   				$("#initDiv").css("display","none");
   				$("#toupdateMenudis").css("display","block");
   			});
		});
   	}


	//重新回到回显页面
   	function resetMenu(){
   		$("#initDiv").css("display","block");
		$("#toupdateMenudis").css("display","none");
   	}
版权声明:本文为weixin_44494406原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44494406/article/details/103252864