layui树形菜单动态遍历的例子


Posted in Javascript onSeptember 23, 2019

1、前端jsp页面

<%@ page language="java" pageEncoding="UTF-8"
contentType="text/html; charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/scd/src/css/iconfont.css" rel="external nofollow" />
<script type="text/javascript">
 layui.use(['layer','tree'],function(){
 var layer = layui.layer
   ,$ = layui.jquery; 
 layui.tree({
 elem: '#demo1' //指定元素
 ,click: function(item){ //点击节点回调
  if(item.preview!=null){
   var index = layer.open({
   type: 2,
   title: item.name,
   content:"/varietySystem/"+item.preview
  });
  layer.full(index);
  $(window).on("resize",function(){
   layer.full(index);
  });
  }
 },
 nodes: [ //节点
  {
  name: '申请文件'
  ,id: 1
  ,alias: 'shenqingwenjian'
  ,spread: true //默认展开
  ,children:function(){
  var arr = [];
   <c:forEach items="${applyRequestList}" var="applyRequest">
    <c:if test="${applyRequest.state == null }">
     arr.push({
       name:"请求书"
       ,preview: 'firstReceiveTree/toApplyRequestInfo/${applyRequest.idpk}'
     });
     </c:if>
     <c:if test="${applyRequest.state != null}">
      arr.push({
       name:"请求书 <fmt:formatDate value="${applyRequest.correcttime}" pattern="yyyyMMdd" />"
       ,preview: 'firstReceiveTree/toApplyRequestInfo/${applyRequest.idpk}'
     });
    </c:if>
    </c:forEach>
   return arr;
  }()
  },
  {
  name: '中间文件'
  ,id: 1
  ,alias: 'zhongjianwenjian'
  ,children:function(){
    var arr = [];
    <c:forEach items="${StatementAndCorrection}" var="StatementAndCorrection">
     <c:if test="${StatementAndCorrection.type==0}">
      arr.push({
       name:"意见陈述书 <fmt:formatDate value="${StatementAndCorrection.submittime}" pattern="yyyyMMdd" />"
       ,preview: 'statementOpinion/preview?idpk=${StatementAndCorrection.typeid}'
     });
    </c:if>
    </c:forEach>
    return arr;
    }()
  },
  {
  name: '通知书'
  ,id: 1
  ,alias: 'tongzhishu'
  ,children:function(){
   var arr = [];
   <c:if test="${not empty formalityNoticeList}">
    <c:forEach items="${formalityNoticeList}" var="formalityNotice">
      arr.push({
      name:"手续合格通知书 <fmt:formatDate value="${formalityNotice.datewriting}" pattern="yyyyMMdd" />"
      ,preview: 'formalityNotice/noticeInfo/${formalityNotice.idpk}'
     });
    </c:forEach>
   </c:if>
   return arr;
  }()
  }
  ]
 });
});
</script>
<table class="layui-table free_tree" >
 <tbody>
  <tr>
   <td style="background: #fff;padding:0px;">
    <div style="width:240px;position:relative; max-height:545px; overflow:auto;" >
     <ul id="demo1"></ul>
    </div>
   </td>
  </tr>
 </tbody>
</table>
<style>
 #demo1>li{
  background: #f2f2f2;
 padding: 4px 0 0 5px;
 border-bottom: 1px solid #e6e6e6;
 line-height:25px;
 }
 #demo1>li:last-child{
  border-bottom:none;
 }
 #demo1>li>a{
 padding-bottom: 4px;
 }
 #demo1>li ul{
  background: #fff;
  margin-left:-5px;
 }
 #demo1>li ul>li{
 border-bottom: 1px solid #e6e6e6;
 /*padding: 4px 0px 3px 27px;*/
 padding: 4px 0px 3px 6px;
 }
 #demo1>li ul li:first-child{
  border-top:1px solid #e6e6e6;
 }
 #demo1>li ul>li:last-child{
  border-bottom:none;
 }
 .layui-tree li i {
 padding-left: 3px;
 }
 .layui-tree li a cite{
  padding: 0 3px;
 }
 #demo1>li ul>li a cite{
  font-size:8px;
 }
 #demo1>li ul>li:hover{
  background: #f2f2f2;
 }
 .free_tree_style{
  margin-left:241px;
 }
</style>

以上这篇layui树形菜单动态遍历的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 #Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 #Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 #Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 #jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 #Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 #Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 #jQuery
You might like
Nginx实现反向代理
2017/09/20 Servers
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
用js实现in_array的方法
2013/11/05 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
js实现简单扫雷
2020/11/27 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
python求解水仙花数的方法
2015/05/11 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python实现图片中文字分割效果
2019/07/22 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
opencv实现图像平移效果
2021/03/24 Python
大学军训通讯稿
2014/01/13 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
九年级化学教学反思
2014/01/28 职场文书
《火烧云》教学反思
2014/04/12 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书