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和 elementvar tree = layui.tree;  var element = layui.element;var sd = $('#sd').val();   //这里我前台传了一个绝对路径放在了隐藏域中，id是sd// alert(sd);看一下是否拿到了var menuid = $('#menuid').val();   //这里是我前台传了一个我要用到的值// alert(menuid);$.ajax({type : "post",            //提交方式为posturl : sd + "/sy/menuAction_menuList.action",   //struts2 的url提交方式，dataType : "json",  //数据是jsondata : {// 传给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>

layui的tree实现 struts 2+layui+jsp相关推荐

layui的tree和form并没有冲突！无限级tree下拉列表和select下拉列表同一页使用！...
在昨天写的随笔中: layui的tree和form同时引用出现冲突的粗略解决办法 https://www.cnblogs.com/xwma/p/10900975.html 提出有冲突,今天在开发中发现 ...
layui的tree如何实现动态加载_layui tree组件如何异步加载数据，动态添加树节点...
$data = [ [ 'id' => 1, 'name' => '江苏省', 'pid' => 0], [ 'id' => 2, 'name' => '徐州市', 'p ...
layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
php layui 框架,快速上手前端框架layui
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 一.介绍在使用layui之前,我们先要了解一下la ...
【报错笔记】做struts项目建立jsp文件老是报错
做struts项目建立jsp文件老是报错,所有项目都一样. 报错原因: 没有导入apache tomcat 解决方法: 点击项目名右键Build Path-Configure Build Path-A ...
jquery3和layui冲突导，致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
项目中使用的jquery版本是jquery-3.2.1,在使用layui弹出全屏iframe窗口时,iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏,代码如下: <!DOC ...
php layui 上传文件,laravel使用layui 上传文件支持pdf上传
控制器: file('file');//获取图片 $allowed_extensions = ["png", "jpg", "gif",&q ...
layui引入php项目,怎么将layui引入开发框架中
将layui引入开发框架中的方法:首先下载layui框架包:然后将layui文件夹拷入项目位置:接着在页面中导入"layui.all.js","layui.css&quo ...
在Struts结构中，JSP页面的元件命名最好别用大写字母开头
在Struts结构中,JSP页面的元件命名最好别用大写字母开头我在JSP页面里面放了一个<select name=Provider>-.</select>,我原来用大写名,希 ...

layui的tree实现 struts 2+layui+jsp

layui的tree实现 struts 2+layui+jsp相关推荐

最新文章

热门文章