layui的tree实现 struts 2+layui+jsp

因为最近自己在写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>