Table of contents
A. Establish database meeting information class
B. Create a jsp interface for adding conferences
2. Import Layui's formSelects (to prepare for the drop-down box selection value)
2. Realize the method of binding the multi-function drop-down box dao
B. Realize the effect on the interface through Javascript
1. Realize corresponding regionalization
2. Encapsulate the multi-select drop-down box in a method
1. Copy the time and date we need to our project on the layui official website
2. Further improvement, intercept and save our time
1. Preparatory work
A. Establish database meeting information class
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. Create a jsp interface for adding conferences
1. Precautions
Of course, pay attention when building the jsp interface: the path of jsp storage, to avoid 404 at runtime
<%@ 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>interface picture
2. Storage path image display
C. Build JS
1. Build addmetting.js
2. Import Layui's formSelects (to prepare for the drop-down box selection value)
Of course, our js and css choose the v4 version, and then download it directly on the official website of layui.
Then import it into our addmeeting.
Of course, when importing the resources we need, we must pay attention to the sequence, otherwise there will be 404 errors
2. Realize the method of binding the multi-function drop-down box dao
A. Query all users and bind the multi-function drop-down box ( with the formSelects component of layui )
1. Rendering
2. Implement. Query all users. Bind the dao method of the multi-function drop-down box, and pass the juni test, and deploy it in useaction
2.1dao method
//查询所有用户 绑定多功能下拉框
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.2 Juni test results
2.3 deployed in useraction
B. Realize the effect on the interface through Javascript
1. Realize corresponding regionalization
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. Encapsulate the multi-select drop-down box in a method
// 初始化多选下拉框
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 Explanation
Among them, formSelects.btn is copied through the official website of ayui, and then modified to define the attributes we need in the underlined place
Secondly, we are sending the request through Json, transferring the data we queried through the dao method before, and saving it in rs to print the effect diagram as follows
Then use the local mode to traverse the attribute names we need through the method of key-value pairs, and finally it is the rendering we showed earlier!
3. Time generation
A. Rendering
B. Implementation process
1. Copy the time and date we need to our project on the layui official website
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();
});
The elem in it is an id attribute defined by the editor, and the others do not need to be modified!
2. Further improvement, intercept and save our time
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; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
});These codes are saved in the code in front of the editor, / process the original time range, get the start and end time, remove spaces, and put it into the json object rs
What is underlined is the field name we defined in the entity class, and it is saved through this: add is that we mentioned sending the request when we added the meeting,
3. Increase meeting
3.1dao method
// 添加会议信息
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 Deployed in servlet
// 增加
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. The final rendering
