一.前期准备工作
A.建立数据库会议信息类
package com.zking.entity; import java.util.Date; /** * 数据库会议信息 * @author lzzxq * */ public class MeetingInfo { private Long id;//会议编号 private String title;//会议标题 private String content;//会议内容 private String canyuze;//参会人员 private String liexize;//列席人员 private String zhuchiren;//主持人 private String location;//会议地点 private Date startTime;//会议开始时间\\\\ private Date endTime;//会议结束时间 private String fujian;//会议附件 private Integer state;//状态 private String seatPic;//会议排座 private String remark;//备注 private String auditor;//审批人 public String getAuditor() { return auditor; } public void setAuditor(String auditor) { this.auditor = auditor; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public String getCanyuze() { return canyuze; } public void setCanyuze(String canyuze) { this.canyuze = canyuze; } public String getLiexize() { return liexize; } public void setLiexize(String liexize) { this.liexize = liexize; } public String getZhuchiren() { return zhuchiren; } public void setZhuchiren(String zhuchiren) { this.zhuchiren = zhuchiren; } public String getLocation() { return location; } public void setLocation(String location) { this.location = location; } public Date getStartTime() { return startTime; } public void setStartTime(Date startTime) { this.startTime = startTime; } public Date getEndTime() { return endTime; } public void setEndTime(Date endTime) { this.endTime = endTime; } public String getFujian() { return fujian; } public void setFujian(String fujian) { this.fujian = fujian; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } public String getSeatPic() { return seatPic; } public void setSeatPic(String seatPic) { this.seatPic = seatPic; } public String getRemark() { return remark; } public void setRemark(String remark) { this.remark = remark; } public MeetingInfo() { super(); // TODO Auto-generated constructor stub } @Override public String toString() { return "MeetingInfo [id=" + id + ", title=" + title + ", content=" + content + ", canyuze=" + canyuze + ", liexize=" + liexize + ", zhuchiren=" + zhuchiren + ", location=" + location + ", startTime=" + startTime + ", endTime=" + endTime + ", fujian=" + fujian + ", state=" + state + ", seatPic=" + seatPic + ", remark=" + remark + "]"; } }
B.建立增加会议的jsp界面
1.注意事项
当然在构建jsp界面时要注意:jsp存储的路径，避免在运行时出现404
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/common/header.jsp"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 导入formSelects css --> <link rel="stylesheet" src="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.css"> <!-- 导入formSelects js --> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/plugins/formSelects/formSelects-v4.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/meeting/addMeeting.js"></script> <title>用户管理</title> </head> <body> <form class="layui-form layui-form-pane"> <div class="layui-form-item"> <button id="btn_add" type="submit" class="layui-btn" lay-submit="" lay-filter="meeting">立即提交</button> <button id="btn_reset" type="reset" class="layui-btn layui-btn-primary">重置</button> </div> <div class="layui-form-item"> <label class="layui-form-label">会议标题</label> <div class="layui-input-block"> <input type="text" name="title" lay-verify="required" 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 name="content" lay-verify="required" placeholder="请输入内容" 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" lay-verify="required" lay-vertype="tips"> <option value="">---请选择---</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" lay-verify="required" lay-vertype="tips"> <option value="">---请选择---</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" name="zhuchirenname" value="${user.name }" autocomplete="off" placeholder="请输入标题" class="layui-input"> <input type="hidden" name="R" value="${user.id }" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">会议地点</label> <div class="layui-input-block"> <input type="text" lay-verify="required" name="location" autocomplete="off" 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" readonly="readonly" lay-verify="required" id="dt" name="dt" 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 name="remark" placeholder="请输入备注" class="layui-textarea"></textarea> </div> </div> </form> </body> </html>
界面图片
2.存储路径图片展示
C.构建JS
1.构建addmetting.js
2.导入Layui的formSelects（为了下拉框选择值做准备）
当然我们的这个js和css选择 v4版本的，然后要下载的话直接在layui的官网实施下载即可，
然后再导入我们的addmeeting.中
当然在导入我们需要的资源时，要注意先后顺序，不然也会出现404的错误
二.实现绑定多功能下拉框dao方法
A.查询所有用户 绑定多功能下拉框（凭借layui的formSelects组件）
1.效果图
2.实现.查询所有用户 绑定多功能下拉框的dao方法，并且通过juni测试，部署在useaction中
2.1dao方法
//查询所有用户 绑定多功能下拉框 public List<Map<String, Object>> queryUserAll(User user, PageBean pageBean) throws Exception { String sql ="select id as value ,name from t_oa_user"; return super.executeQuery(sql, pageBean); }
2.2juni测试效果
2.3部署在useraction
B.在界面实现效果通过Javascript
1.实现相对应的区域化
let form, layer, $, formSelects, laydate; layui.use([ 'form', 'layer', 'jquery', 'laydate' ], function() { form = layui.form, layer = layui.layer, $ = layui.jquery, laydate = layui.laydate, // 非模块化处理方式 formSelects = layui.formSelects; // 初始化多选下拉框 initForm() });
2.将多选下拉框封装在一个方法中
// 初始化多选下拉框 function initForm() { // 绑定多功能下拉框 formSelects.btns('canyuze', [ 'select', 'remove', 'reverse' ]); formSelects.btns('liexize', [ 'select', 'remove', 'reverse' ]); $.getJSON("user.action", { methodName : "queryUserAll" }, function(rs) { console.log(rs); // local模式 formSelects.data('canyuze', 'local', { arr : rs.data }); formSelects.data('liexize', 'local', { arr : rs.data }); }); }
2.1解释说明
在其中的，formSelects.btn是通过ayui的官网copy，然后进行修改，将我们所需要的属性定义在划线地方
其次我们在通过Json发送请求，将我们之前通过的dao方法查询的数据传输过来，并且保存在rs中 打印效果图如下
然后在通过local模式，将我们需要的属性名，通过键值对的方法遍历出来，最后就是我们前面展示的效果图了！
三.时间生成
A.效果图
B.实现流程
1.在layui官网将我们需要的时间日期选择copy到我们的项目中
let form, layer, $, formSelects, laydate; layui.use([ 'form', 'layer', 'jquery', 'laydate' ], function() { form = layui.form, layer = layui.layer, $ = layui.jquery, laydate = layui.laydate, // 非模块化处理方式 formSelects = layui.formSelects; // 会议时间组件初始化 laydate.render({ elem : '#dt', type : 'datetime', range : '至' }); // 初始化多选下拉框 initForm(); });
在其中的elem是小编定义的一个id属性的，其他的不需要修改！
2.进一步完善，将我们的时间进行截取保存
orm.on('submit(meeting)', function(data) { // 将原有的时间范围进行处理，拿到开始，结束时间，去除空格，放入json对象rs let rs = data.field; rs['startTime'] = rs.dt.split('至')[0].trim(); rs['endTime'] = rs.dt.split('至')[1].trim(); rs['methodName'] = 'add'; console.log(rs); //发生请求 $.post('info.action',rs,function(json){ console.log(rs) if(json.success){ layer.msg(json.msg,{icon:6},function(){}); $('#btn_reset').click(); }else{ layer.msg(json.msg,{icon:5},function(){}); } },'json'); return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。 });
这些代码是保存在小编前面的代码里面的，/将原有的时间范围进行处理，拿到开始，结束时间，去除空格，放入json对象rs
在其中划线的是我们在实体类定义的字段名，并且通过此来保存：add是我们在增加会议是提及发送请求，
3.增加会议
3.1dao方法
// 添加会议信息 public int add(MeetingInfo info) throws Exception { String sql = "insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,\r\n" + "location,startTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)"; System.out.println("sql语句:"+sql); return super.executeUpdate(sql, info, new String[] { "title", "content", "canyuze", "liexize", "zhuchiren", "location", "startTime", "endTime", "remark" }); }
3.2部署在servelt中
// 增加 public String add(HttpServletRequest req, HttpServletResponse resp) { try { int add = meetingInfoDao.add(info); ResponseUtil.writeJson(resp, R.ok(0, "会议信息增加成功")); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return null; }
C.最终效果图
