移动应用实战（移动OA）之五_会议室管理之二

　　移动应用实战（移动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变量向客户端返回“保存成功！”的信息。

　　在本节中，可能会碰到几个小问题，针对这些问题，我会专门写一篇文章加以说明。