1.左侧导航
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。
面包屑结构简单，支持自定义分隔符。
注：千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，
如呼出二级菜单等，需借助element模块才能使用。
参考地址：http://layui.org.cn/doc/element/nav.html
2.导入数据表及无限级分类
1) 数据导入（此步骤在第一次文章已完成）
2) 无限级分类：父亲找儿子的过程，将对应的儿子放在父亲下面，形成树结构。（递归算法）
3.实现左侧菜单后台代码接口
4.前端左侧菜单绑定
5.Tab选项卡
Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。
Tab分类
参考地址：http://layui.org.cn/doc/element/tab.html
1）Tab简约风格
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"></div> </div>
2）Tab卡片风格
<div class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content" style="height: 100px;"> <div class="layui-tab-item layui-show">1</div> <div class="layui-tab-item">2</div> <div class="layui-tab-item">3</div> <div class="layui-tab-item">4</div> <div class="layui-tab-item">5</div> <div class="layui-tab-item">6</div> </div> </div>
3）响应式Tab
当容器的宽度不足以显示全部的选项时，即会自动出现展开图标。
4）带删除的Tab
与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"
<div class="layui-tab" lay-allowClose="true"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户基本管理</li> <li>权限分配</li> <li>全部历史商品管理文字长一点试试</li> <li>订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">1</div> <div class="layui-tab-item">2</div> <div class="layui-tab-item">3</div> <div class="layui-tab-item">4</div> <div class="layui-tab-item">5</div> <div class="layui-tab-item">6</div> </div> </div>
5）动态Tab
1）根据模块名称判断是否已经存在tab选项卡 $(".layui-tab-title li[lay-id='" + name + "']").length > 0 2）切换到指定选项卡 element.tabChange('tabs', name); 3）动态添加选项卡 // 新增一个Tab项 element.tabAdd('tabs', { title : name, content : tabContent, id : name }) // 切换刷新 element.tabChange('tabs', name); 注：tabs为tab选项卡的lay-filter="" <div class="layui-tab" lay-filter="tabs" lay-allowClose="true" style="margin:0px;">
附录一：什么是lay-filter
事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器
附录二：iframe
<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>
注：在index.jsp首页页面中请将
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
更改成：
<!DOCTYPE>
不然会导致使用iframe动态打开页面的高度无法100%填充父容器；
附录三：如何隐藏tab第一个选项卡的删除图标
<style> .layui-tab-title>li:first-child>i{ display:none; } </style>
附录四：首页tab选项卡及body样式处理
.layui-tab>.layui-tab-content{ padding:0px; } body,html{ padding:0px; margin:0px; overflow:hidden; }
一.会议发布
初始化会议发布页面
addMeeting.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <%@include file="/common/head.jsp" %> <style type="text/css"> .layui-form { margin: 10px 10px 30px 10px; } </style> </head> <body> <form class="layui-form layui-form-pane" lay-filter="meetinginfo" > <div class="layui-form-item"> <label class="layui-form-label">会议标题</label> <div class="layui-input-block"> <input type="text" name="title" autocomplete="off" placeholder="请输入会议标题" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">会议内容</label> <div class="layui-input-block"> <textarea placeholder="请输入内容" name="content" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">参与者</label> <div class="layui-input-block"> <select name="canyuze" xm-select="canyuze"> <option value="" disabled="disabled">--请选择--</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">列席者</label> <div class="layui-input-block"> <select name="liexize" xm-select="liexize"> <option value="" disabled="disabled">--请选择--</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">主持人员</label> <div class="layui-input-block"> <input type="text" readonly="readonly" value="${sessionScope.user.name}" placeholder="会议标题" class="layui-input"> <input type="hidden" name="zhuchiren" readonly="readonly" value="${sessionScope.user.id}"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">会议地点</label> <div class="layui-input-block"> <input type="text" name="location" placeholder="请输入会议地点" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">会议时间</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="meetingdt" name="meetingDt" placeholder="请输入会议时间"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">备注</label> <div class="layui-input-block"> <textarea placeholder="请输入备注" name="remark" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item" style="text-align:center;"> <button type="button" lay-submit="" lay-filter="meetinginfo" class="layui-btn layui-btn-normal">保存</button> <button type="reset" class="layui-btn">重置</button> </div> </form> </body> </html>
addMeeting.js
<script> let formSelects = null; let laydate = null; let form = null; let $ = null; layui.use(['jquery', 'formSelects','laydate','form'], function() { formSelects = layui.formSelects; laydate = layui.laydate; form = layui.form; $ = layui.$; //参与者多选 formSelects.btns('canyuze', ['select', 'remove', 'reverse']); formSelects.data('canyuze', 'server', { url: ctx + '/meetinginfoAction.action?methodName=listMeetingMember' }); //列席者多选 formSelects.btns('liexize', ['select', 'remove', 'reverse']); formSelects.data('liexize', 'server', { url: ctx + '/meetinginfoAction.action?methodName=listMeetingMember' }); //日期时间范围 laydate.render({ elem: '#meetingdt', type: 'datetime', range: '至' }); //提交表单 form.on('submit(meetinginfo)', function(data) { //console.log(data); let dt = data.field.meetingDt; let start = dt.split("至")[0].trim(); let end = dt.split("至")[1].trim(); data.field["startTime"] = start; data.field["endTime"] = end; //console.log(data); $.ajax({ url: ctx + '/meetinginfoAction.action?methodName=addMeetinginfo', data: data.field, type: 'post', dataType: 'json', success: function(resp) { layer.msg(resp.msg); } }) }); }); </script>
会议发布功能实现
IMeetingInfoDao.java
package com.zking.oa.dao; import java.util.List; import java.util.Map; import org.lisen.mvc.util.PageBean; import com.zking.oa.model.MeetingMember; import com.zking.oa.model.Meetinginfo; import com.zking.oa.model.User; public interface IMeetinginfoDao { List<MeetingMember> listMeetingMember(); /** * 增加 * @param meetinginfo */ void addMeetinginfo(Meetinginfo meetinginfo); /** * 获取我的会议信息 * @param meetingInfo * @param pageBean * @return */ List<Map<String,Object>> listMeetingInfo(Meetinginfo meetingInfo, PageBean pageBean); List<User> listMeetingMembersById(Integer id); void updateSeatPicById(Meetinginfo meetingInfo); /** * 更新送审信息 * @param meetingInfo */ void sendAudit(Meetinginfo meetingInfo); /** * 更新审核记录到指定装 * @param meetingInfo */ void updateMeetingState(Meetinginfo meetingInfo); /** * 查询与当前登录用户相关的状态为待开的会议信息 * @param uid * @param pageBean * @return */ List<Meetinginfo> listRelatedMeetingInfoByUserId(Integer uid,String title,Integer state, PageBean pageBean); /** * 历史会议 * @param uid * @param title * @param state * @param pageBean * @return */ List<Meetinginfo> listRelatedMeetingInfoByUserId2(Integer uid, String title, Integer state, PageBean pageBean); }
