因为最近自己在写crm,然后是用layui实现的,因为是刚刚接触layui,真的踩了超级多的坑,写一个tree真是咋写咋不对,现在将我的tree分享给你们。
先给你们看一下成品
首先展示tree的页面,要引入对应的layui的css文件和js文件 ,
这里是我展示tree的地方
<div class="layui-side layui-bg-black ">
<div class="layui-side-scroll layui-bg-black"> <!--这里是调- 左侧导航区域背景色,为黑色 -->
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" id="demo"></ul> <!--给tree展示的地方,一个id名叫demo -->
</div>
</div>
这里我给我的tree调了一下样式,因为它默认配色是黑色的,这里写在body外面
<style type="text/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;
}
</style>
现在我们看一下后台实现的js,我用的是Ajax实现的
$(function() {
layui.use([ 'tree', 'element' ],function() { //模块化使用,tree和 element
var tree = layui.tree;
var element = layui.element;
var sd = $('#sd').val(); //这里我前台传了一个绝对路径放在了隐藏域中,id是sd
// alert(sd);看一下是否拿到了
var menuid = $('#menuid').val(); //这里是我前台传了一个我要用到的值
// alert(menuid);
$.ajax({
type : "post", //提交方式为post
url : sd + "/sy/menuAction_menuList.action", //struts2 的url提交方式,
dataType : "json", //数据是json
data : {// 传给servlet的数据,
right_type : '000', //right_type是我后台用来接受的值的参数,这里我用000是我的数据头,也可以是menuid
},async : false,
success : function(data) { // console.log(data)
layui.tree({
elem : '#demo',// 传入元素选择器
nodes : data, //nodes为数据
// spread:true,
click : function(node) {// 点击tree菜单项的时候
// alert(node.attributes.right_url);
console.log(node);
var exist = $("li[lay-id='"+ node.id+ "']").length;// 判断是不是用重复的选项卡
if (exist > 0) {
element.tabChange('tabs',node.id);// 切换到已有的选项卡
} else {
if (node.attributes.right_url != null && node.attributes.right_url != "") {// 判断是否需要新增选项卡
element.tabAdd('tabs',
{title : node.name,
content : '<iframe scrolling="no" frameborder="0" src="'
+ sd+ '/'+ node.attributes.right_url+ '" width="99%" height="99%"></iframe>'// 支持传入html
,id : node.id});
element.tabChange('tabs',node.id);
}
}
}
});
}
});
});
})
struts 2的xml
<!-- MenuAction -->
<action name="menuAction_*" class="com.zking.web.MenuAction" method="{1}" >
</action>