layui的树形菜单

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

 

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

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

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

 

树形菜单展示：

 

jsp代码：

 

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:''//支持传入html
					                  //这是选项卡的id
					                  ,id:node.id
					              });
									element.tabChange('tabs', node.id);
								  }
						}
			        }
				});
		}
	});
});

后台需要传过来几个参数

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

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