网站制作建设模板,做网站和网页区别,招聘网站数建设,国内购物网站大全目录 前言#xff1a; 会议发布的产品原型图#xff1a;
1.会议发布
1.1实现的特色功能#xff1a;
1.2思路#xff1a; 使用的数据库#xff1a; 我们要实现多功能下拉框的形式选择可以参考原文档#xff1a;https://hnzzmsf.github.io/example/example_v4.html#down… 目录 前言 会议发布的产品原型图
1.会议发布
1.1实现的特色功能
1.2思路 使用的数据库 我们要实现多功能下拉框的形式选择可以参考原文档https://hnzzmsf.github.io/example/example_v4.html#download
1.3使用的知识技术formSelect插件用于下拉显示得到的参与用户数据将点击下拉 的数据显示到文本框中ajaxsession保存
1.4实现功能 addMeeting.js 在UserDao中写一个查询所有用户的方法 UserAction新增一个查询用户 MeetingInfoAction MeetingInfoDao
1.5演示效果 前言 今天小编带来的是会议OA项目功能之会议发布功能我们今天正式进入这个会议OA项目的分享。
使用的开发工具eclipseMySQLtonmcat8.5
会议发布的产品原型图 1.会议发布
1.1实现的特色功能 1将参与人员的名字能够通过下拉框的形式选择2添加具有具体时间的选择器3发布成功后刷新表单。 1.2思路 分析得出在这个界面就是LayUi的一个表单提交的功能我们去官网中找到对应的源码这个页面的前端代码 % page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%
%include file/common/head.jsp%
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
script typetext/javascript src${pageContext.request.contextPath }/static/js/meeting/addMeeting.js/script
title发布会议/title
/head
body
form classlayui-form layui-form-panediv classlayui-form-itembutton idbtn_add typesubmit classlayui-btn lay-submit lay-filtermeeting立即提交/buttonbutton idbtn_reset typereset classlayui-btn layui-btn-primary重置/button/divdiv classlayui-form-itemlabel classlayui-form-label会议标题/labeldiv classlayui-input-blockinput typetext nametitle lay-verifyrequired autocompleteoff placeholder请输入标题 classlayui-input/div/divdiv classlayui-form-item layui-form-textlabel classlayui-form-label会议内容/labeldiv classlayui-input-blocktextarea namecontent lay-verifyrequired placeholder请输入内容 classlayui-textarea/textarea/div/divdiv classlayui-form-itemlabel classlayui-form-label参与者/labeldiv classlayui-input-blockselect namecanyuze xm-selectcanyuze lay-verifyrequired lay-vertypetipsoption value---请选择---/option/select/div/divdiv classlayui-form-itemlabel classlayui-form-label列席者/labeldiv classlayui-input-blockselect nameliexize xm-selectliexize lay-verifyrequired lay-vertypetipsoption value---请选择---/option/select/div/divdiv classlayui-form-itemlabel classlayui-form-label主持人/labeldiv classlayui-input-blockinput typetext readonlyreadonly namezhuchirenname value${user.name } autocompleteoff placeholder请输入标题 classlayui-inputinput typehidden namezhuchiren value${user.id }//div/divdiv classlayui-form-itemlabel classlayui-form-label会议地点/labeldiv classlayui-input-blockinput typetext lay-verifyrequired namelocation autocompleteoff placeholder请输入会议地点 classlayui-input/div/divdiv classlayui-form-itemlabel classlayui-form-label会议时间/labeldiv classlayui-input-blockinput typetext readonlyreadonly lay-verifyrequired iddt namedt autocompleteoff placeholder请选择会议时间 classlayui-input/div/divdiv classlayui-form-item layui-form-textlabel classlayui-form-label备注/labeldiv classlayui-input-blocktextarea nameremark placeholder请输入备注 classlayui-textarea/textarea/div/div
/form
/body
/html
使用的数据库 我们要实现多功能下拉框的形式选择可以参考原文档https://hnzzmsf.github.io/example/example_v4.html#download 1.下载相关的js文件以及css文件 我们下载的js/css都在这里面。 将这4个文件下载下来 引入了外部资源后我们便可以根据官网的介绍来进行我们addMeeting.js的编码工作
将它写的数据改变使用Ajax传递我们想要传递的数据就行了 1.3使用的知识技术formSelect插件用于下拉显示得到的参与用户数据将点击下拉的数据显示到文本框中ajaxsession保存
1.4实现功能
addMeeting.js let $,formSelects;
layui.use([jquery,formSelects],function(){$layui.jquery,formSelectslayui.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}]});
})
在UserDao中写一个查询所有用户的方法 //查询所有用户用于绑定多功能下拉框public ListMapString, Object queryUserAll(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{String sqlselect id as value,name from t_oa_user;return super.executeQuery(sql, pageBean);}
UserAction新增一个查询用户
/*** 添加会议的用户信息* param req* param resp* return*/public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {try {ListMapString, Object users userdao.queryUserAll(user,null);ResponseUtil.writeJson(resp, R.ok(200, 获取用户多选框数据成功, users));} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, 获取用户多选框数据失败));} catch (Exception e1) {e1.printStackTrace();}}return null;} 这里我们将查询到的方法更新到js中 let $,formSelects;
layui.use([jquery,formSelects],function(){$layui.jquery,formSelectslayui.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 MeetingInfoAction 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;}
MeetingInfoDao /*** 会议新增* * 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 });} 我们实体中的时间是data类型这里在Action中注册一个转接器(用于时间date类型转页面显示) 我们可以用到一个工具类将转换的代码全部封装起来那么以后在其他的地方就方便调用 Overridepublic 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 {Overridepublic 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;}
} 1.5演示效果 今天会议管理就分享到这里了
