layui的树形菜单

本来在此次项目中用的是easyui，但是在之前看到了layui做出来的样式比easyui好看的多，所以这次项目用的是layui做一个后台页面。

 

这是定义的一个树形菜单的样式，我会把css样式和js代码放下面

在这也是参考了：https://blog.csdn.net/nb7474/article/details/79413460/   

https://www.cnblogs.com/hukeer/p/8383708.html   这俩篇文章

 

树形菜单展示：

 

jsp代码：

 

	<!-- 左边tree页面 -->
<div class="layui-side layui-bg-black">
        <div class="layui-side-scroll " >
            <div id="sidemenubar" lay-filter="test"></div>
        </div>
</div>

<!-- 选项卡要显示的地方 -->
	<div class="layui-body">
		<div class="layui-tab" lay-filter="tabs" lay-allowClose="true" >
			<ul class="layui-tab-title">
			</ul>
			<div class="layui-tab-content">
			</div>
		</div>
	</div>

css样式

.layui-tree li i{
    color: rgba(255,255,255,.7);
    display: none;
}
.layui-tree li a cite{
    color: rgba(255,255,255,.7)
}
.layui-tree li .layui-tree-spread{
    display: block;
    position: absolute;
    right: 30px;
}
.layui-tree li{
    line-height: 45px;
    position: relative;
}
.layui-tree li ul{
    margin-left: 0;
    background: rgba(0,0,0,.3);
}
.layui-tree li ul a{
    padding-left: 20px;
}
.layui-tree li a{
    height: 45px;
    border-left: 5px solid transparent;
    box-sizing: border-box;
    width: 100%;
}
.layui-tree li a:hover{
    background: #4E5465;
    color: #fff;
    border-left: 5px solid #009688;
}
.layui-tree li a.active{
    background: #009688;
}

js代码：

layui.use(['element','layer','jquery','tree'], function(){
    var element = layui.element;
    var layer = layui.layer;
    var $ = layui.jquery;
    
    $.ajax({
		type : "post",
		url : "menuAction.action?methodName=menuTreeList",
		dataType : "json",
		data : {// 传给servlet的数据,
			d : new Date()
		},
		success : function(data) {
			layui.tree({
				  elem: '#sidemenubar' //传入元素选择器
				  ,nodes: data
				  ,autoRefresh:true
				  ,click: function(node){
					  var exist=$("li[lay-id='"+node.id+"']").length;
						if (exist > 0) {//判断是否已经发开选项卡
							element.tabChange('tabs', node.id);// 切换到已有的选项卡
						} else {//如果没打开就新建一个选项卡
							 if (node.children.MenuURL!=null) {
								  element.tabAdd('tabs', {
					                  title:node.name//选项卡的名称
					                  //把这个页面嵌套进选项卡中
					                  ,content:'<iframe scrolling="no" frameborder="0" src="'+node.children.MenuURL+'" width="99%" height="99%"></iframe>'//支持传入html
					                  //这是选项卡的id
					                  ,id:node.id
					              });
									element.tabChange('tabs', node.id);
								  }
						}
			        }
				});
		}
	});
});

后台需要传过来几个参数

        //选项卡需要的id
        private String id;
        //选项卡的名字
	    private String name;
	    //描述父子节点，用于递归子节点
	    private List<TreeNode> children = new ArrayList<>();
	    //树形菜单的节点，除了ID以及展示文本，可能还伴有跳转页面或者图片展示，等等一系列的描述
	    //都将其放入到map集合中
	    private Map<String, Object> attributes = new HashMap<>();

如果你用的是谷歌浏览器   记住一定要常请缓存！！！！！