移动应用实战(移动OA)之五_会议室管理之二
在本节中,我们将学习制作“预订会议室”功能。
一、功能简介
在会议室页面,我们添加了两个按钮:“查看已有预订”和“预订会议室”:
点击“预订会议室”按钮,将进入“会议室预订”界面:
有一个功能强大的时间选择组件:
下面我们来讲解制作流程。
二、修改会议室页面的代码
我们需要给每一个会议室的列表项都增加了两个按钮:“查看已有预订”和“预订会议室”。
“查看已有预订”功能将在后面的章节中讲解,本节主要讲解“预定会议室”功能。
只需修改会议室页面的脚本部分:
我们通过代码,在每个会议室列表项中添加了两个按钮。并且为“预订会议室”按钮编写了点击事件的处理代码。
我们的想法是:点击“预订会议室”按钮,跳转到预订页面,并在预订页面上显示会议室编号和会议室名称。
所以这里需要在页面间传递参数。
我们的做法是,把需要传递的参数先写在自定义属性中,然后在点击事件的处理代码里,获取自定义属性的值,传递给预订页面。
自定义属性tag用于保存会议室id,自定义属性tag2用于保存会议室名称。
$("#meetingRoomList button[name=order]")是很强大的jquery选择器,可以找到id为meetingRoomList元素内,所有名为order的button元素。
在tap事件的处理代码中,$(this)表示触发tap事件的对象,其实就是button元素。然后用attr(属性名)取得指定属性的值。
三、编写预订会议室页面的代码
下面来编写预订会议室页面(hysyd.html)的源代码。
1. 在页面中添加表单及表单元素
这里,我们制作了一个表单,在jQueryMobile中,表单和表单元素都比较简单,是我们熟悉的HTML标签。
比较重要的是,我们选择了异步方式提交表单。
表单并没有设置action属性。提交按钮的类型是button,之后会通过编写脚本,来实现异步提交表单数据。
另外,我们还想继续使用struts2的自动表单封装功能,所以每个表单项的name属性都是按:"order.属性名"的格式来设置的。属性名与后台的实体类的属性名一一对应。
2. 表单数据初始化
从上一个页面传递过来两个参数,在本页面中需要解析并显示:
这部分的参数解析在前面的文章中有提过了。函数getURLParameter(name)可以通过参数名,获得参数值。实现原理是编写了一个正则表达式,用于解析网址(URL)。
3. 时间插件
在HTML5中,可以使用<input type="date">标记来获得一个日期选择组件。但是要同时可以选择日期和时间,并且样式美观,就需要定制了。
这是我在网上找的一个日期插件,名为mobiscroll。解压后,导入它的脚本和样式表就可以用了。
这个日期插件我做了较多的设置,例如:
lang: 'zh' // 中文支持
startYear: currYear - 1
endYear: currYear + 1 // 日期只能选择去年、今年、明年
stepMinute: 5 // 分钟只能选5、10、15、20......
4. 提交表单的代码
点击提交按钮时,使用异步方式提交表单数据。
这里既可以使用$.post()方法,也可以使用$.ajax()方法,$.ajax()方法参数更详细一些。
这里比较重要的参数有:
url: 设置提交的目标
data: 设置提交的数据,在这里我们使用了一个jquery函数serialize(),它可以将整个表单中的所有表单元素序列化为一个JSON字符串
dataType: 设置提交的数据格式
success: 设置回调函数
四、后台代码
1. 数据表定义:
注意:时间应定义为TIMESTAMP类型。
2. 后台代码
其它部分的后台代码就省略了,不过是bean、dao、biz等,biz的接口应至少提供两个方法:新增会议室预订、根据会议室编号查找所有预订。
下面贴出action类的代码:
在action中定义一个名为order的实体变量,用于接收表单提交过来的数据。
在addMeetingRoomOrderAJAX功能中,调用业务逻辑层的方法保存预订信息,并设置msg变量向客户端返回“保存成功!”的信息。
在本节中,可能会碰到几个小问题,针对这些问题,我会专门写一篇文章加以说明。