目录
前言:
会议发布的产品原型图:
1.会议发布
1.1实现的特色功能:
1.2思路:
使用的数据库:
我们要实现多功能下拉框的形式选择可以参考原文档:https://hnzzmsf.github.io/example/example_v4.html#download
1.3使用的知识技术:formSelect插件(用于下拉显示得到的参与用户数据将点击下拉 的数据显示到文本框中),ajax,session保存
1.4实现功能:
addMeeting.js
在UserDao中写一个查询所有用户的方法:
UserAction新增一个查询用户
MeetingInfoAction
MeetingInfoDao
1.5演示效果:
今天小编带来的是会议OA项目功能之会议发布功能,我们今天正式进入这个会议OA项目的分享。
使用的开发工具:eclipse,MySQL,tonmcat8.5,
1将参与人员的名字能够通过下拉框的形式选择,2添加具有具体时间的选择器,3发布成功后,刷新表单。
分析得出在这个界面就是LayUi的一个表单提交的功能我们去官网中找到对应的源码这个页面的前端代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp"%>
发布会议
1.下载相关的js文件以及css文件
我们下载的js/css都在这里面。
将这4个文件下载下来
引入了外部资源后我们便可以根据官网的介绍,来进行我们addMeeting.js的编码工作
将它写的数据改变,使用Ajax传递我们想要传递的数据就行了!
let $,formSelects;
layui.use(['jquery','formSelects'],function(){
$=layui.jquery,formSelects=layui.formSelects;
//添加多功能下拉框选项
formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
formSelects.btns('liexize', ['select', 'remove', 'reverse']);
//local模式
formSelects.data('canyuze', 'local', {
arr: [
{"name": "广州", "value": 3},
{"name": "深圳", "value": 4},
{"name": "天津", "value": 5}
]
});
})
//查询所有用户用于绑定多功能下拉框
public List
/**
* 添加会议的用户信息
* @param req
* @param resp
* @return
*/
public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
try {
List
这里我们将查询到的方法更新到js中
let $,formSelects;
layui.use(['jquery','formSelects'],function(){
$=layui.jquery,formSelects=layui.formSelects;
//添加多功能下拉框选项
formSelects.btns('canyuze', ['select', 'remove', 'reverse']);
formSelects.btns('liexize', ['select', 'remove', 'reverse']);
$.getJSON("user.action",{methodName:"queryUserAll"},function(rs){
//local模式
formSelects.data('canyuze', 'local', {
arr: rs.data
});
formSelects.data('liexize', 'local', {
arr: rs.data
});
})
})
我们查看LayUi的官网,进行copy对应的资源
layDate - JS 日期和时间选择器组件/插件 - 在线演示 - Layuihttp://layui.org.cn/demo/laydate.html
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
int rs = meetingInfoDao.add(info);
if (rs > 0) {
ResponseUtil.writeJson(resp, R.ok(200, "会议信息增加成功"));
} else {
ResponseUtil.writeJson(resp, R.error(0, "会议信息增加失败"));
}
} catch (Exception e) {
e.printStackTrace();
}
return "toList";
}
/**
* 会议新增
*
* @param meetingInfo
* @return
* @throws Exception
*/
public int add(MeetingInfo meetingInfo) throws Exception {
String sql = "insert into t_oa_meeting_info(title,content,canyuze,liexize,zhuchiren,\r\n"
+ "location,startTime,endTime,remark) values(?,?,?,?,?,?,?,?,?)";
return super.executeUpdate(sql, meetingInfo, new String[] { "title", "content", "canyuze", "liexize", "zhuchiren",
"location", "startTime", "endTime", "remark" });
}
@Override
public MeetingInfo getModel() {
// 注册一个转接器(用于时间date类型转页面显示)
// ConvertUtils.register(new MysqlxDatatypes, Date.class);
return info;
}
package com.zking.util; import java.text.SimpleDateFormat; import java.util.Date; import org.apache.commons.beanutils.Converter; public class MyDateConverter implements Converter { @Override public Object convert(Class type, Object value) { String dateStr = (String)value; SimpleDateFormat spdt = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); try { Date date = spdt.parse(dateStr); return date; } catch (Exception e) { e.printStackTrace(); } return null; } }
今天会议管理就分享到这里了!