移动应用实战（移动OA）之四

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

　　会议室管理是OA系统的常用功能之一，公司里有多个会议室，员工要使用每个会议室前需要预定。

　　会议室有“查看已有预定”和“预定会议室”两项功能。

　　当点击“会议室”功能时，首先显示会议室的列表，界面如下：

　　一、后台部分

　　后台代码放在原OA项目里，在原OA项目中创建如下包结构：

　　数据库如下：

　　1. 实体类通过Hibernate反向工程生成。

　　2. MeetingRoomDao接口：

public interface MeetingRoomDao {List<MeetingRoom> getAll();
}

　　3. MeetingRoomBiz接口：

public interface MeetingRoomBiz {List<MeetingRoom> getAll();
}

　　4. 请自行编写Dao和Biz的实现类。

　　5. MeetingRoomAction类：

@ParentPackage("json-default")
@Results({ @Result(name = "getMeetingRoomAJAXOK", type = "json", params = {"root", "meetingRoomList", "callbackParameter", "callback" }) })
public class MeetingRoomAction extends ActionSupport {private static final long serialVersionUID = 1L;@Resourceprivate MeetingRoomBiz meetingRoomBiz;private List<MeetingRoom> meetingRoomList;@Action(value = "getMeetingRoomAJAX")public String getMeetingRoomAJAX() {meetingRoomList = meetingRoomBiz.getAll();return "getMeetingRoomAJAXOK";}// getter & setterpublic List<MeetingRoom> getMeetingRoomList() {return meetingRoomList;}public void setMeetingRoomList(List<MeetingRoom> meetingRoomList) {this.meetingRoomList = meetingRoomList;}
}

　　在Action类中，定义了meetingRoomList变量，用于保存会议室列表。

　　并且在@Result定义中，指定params参数："root"的值为"meetingRoomList"，表示只将此变量生成json发给客户端。

　　另外，找三张会议室的图片，放在这个目录里：

　　二、前台部分

　　注意，前台部分的网站是独立于刚才的OA项目的，不要把前台网站的代码放在OA项目里，因为前台网站以后会放在手机端。

　　前台页面的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).ready(function() {$("#hys").on("tap",function(){$.getJSON("http://localhost:8080/oa/getMeetingRoomAJAX.action?callback=?",{},function(data) {var html = "";$.each(data, function(i, item) {html += "<li><a href='#'><img src='http://localhost:8080/oa/manage/images/" + item.pic + "' />";html += "<h2>" + item.name + "</h2>";html += "<p>" + item.desc + "</p></a></li>";});$("#meetingRoomList").html(html);$("#meetingRoomList").listview("refresh");});});
});
</script>
<style type="text/css">
.dark {color: #CCC;
}
</style>
</head><body><div data-role="page"><div data-role="header" data-position="fixed" data-theme="b"><a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext">首页</a><h1>个人信息</h1></div><div data-role="content" data-theme="d"><ul id="meetingRoomList" data-role="listview" data-inset="true"></ul></div><div data-role="footer" data-position="fixed" data-theme="c"><div data-role="navbar"><ul><li><a id="gg" href="gg.html"><img src="data:images/gg.png" /><br />公告</a></li><li><a id="sp" href="sp.html"><img src="data:images/sp.png" /><br />审批</a></li><li><a id="qd" href="qd.html"><img src="data:images/qd.png" /><br />签到</a></li><li><a id="hys" href="hys.html"><img src="data:images/hys.png" /><br />会议室</a></li><li><a id="grxx" href="grxx.html" class="ui-btn-active ui-state-persist"><img src="data:images/grxx.png" /><br />个人信息</a></li></ul></div></div></div></body>
</html>

　　重点解释一下jquery脚本：

<script>
$(document).ready(function() {$("#hys").on("tap",function(){ // 点击会议室按钮，执行ajax功能$.getJSON("http://localhost:8080/oa/getMeetingRoomAJAX.action?callback=?",{},function(data) { // 这时回调函数得到的是一个listvar html = "";$.each(data, function(i, item) { // 使用jquery的each方法遍历list，参数i为序号，item为遍历对象html += "<li><a href='#'><img src='http://localhost:8080/oa/manage/images/" + item.pic + "' />";html += "<h2>" + item.name + "</h2>";html += "<p>" + item.desc + "</p></a></li>";});$("#meetingRoomList").html(html);$("#meetingRoomList").listview("refresh");});});
});
</script>

　　这里的布局参考的是： jquery mobile的列表视图。

　　最后一行：　　

$("#meetingRoomList").listview("refresh"); //用于刷新列表视图

移动应用实战（移动OA）之四_会议室管理之一相关推荐

JavaEE项目实战（OA系统）之十八_流程审批之一
JavaEE项目实战(OA系统)之十八_流程审批之一下面介绍OA系统的另一模块:流程审批. OA系统推崇的是无纸化办公,因此各项事务的流程审批是OA系统的一大类应用. 下面,我们来设计流程审批的数据 ...
Hadoop实战（6）_搭建Apache Hadoop的Eclipse开发环境
系列目录: Hadoop实战(1)_阿里云搭建Hadoop2.x的伪分布式环境 Hadoop实战(2)_虚拟机搭建Hadoop的全分布模式 Hadoop实战(3)_虚拟机搭建CDH的全分布模式 Had ...
VMware HA实战攻略之四VMware HA安装及配置
[IT168 专稿]在前面三篇文章中(点击1.2.3),不但讲述了如何准备适合虚拟化的硬件.软件,以及如何使用现有的硬件.软件搭建一套实验环境,还讲述了通过VC Server如何添加主机和ISCSI存 ...
Darknet_Yolov4实战（一）_安装Ubuntu+cuda+cudnn
Darknet_Yolov4实战(一)_安装Ubuntu+cuda+cudnn 安装Ubuntu18.04 安装显卡驱动安装cuda 安装cudnn 安装Ubuntu18.04 首先关闭你要安装 U ...
Hadoop实战（3）_虚拟机搭建CDH的全分布模式
系列目录: Hadoop实战(1)_阿里云搭建Hadoop2.x的伪分布式环境 Hadoop实战(2)_虚拟机搭建Hadoop的全分布模式建立Linux虚拟机(全节点) 客户机操作系统:rhel-s ...
android在使用单位方面,《Android项目实战——手机安全卫士》_面试题答案.docx
<Android项目实战--手机安全卫士>_面试题答案 <Android项目实战--手机安全卫士>面试题答案第1章项目简介请问Android程序的真正入口是什么.Android ...
系统管理模块_部门管理_设计(映射)本模块中的所有实体并总结设计实体的技巧_懒加载异常问题_树状结构...
系统管理模块_部门管理_设计本模块中的所有实体并总结设计实体的技巧设计实体流程 1,有几个实体? 一般是一组增删改查对应一个实体. 2,实体之间有什么关系? 一般是页面引用了其他的实体时,就表示与这 ...
论坛模块_版块管理_增删改查实现上下移动
论坛模块_版块管理1_增删改查设计实体Forum.java public class Forum {private Long id;private String name;private Strin ...
Vue实战电商系统-五商品管理
Vue实战电商系统-五商品管理商品管理 1.新建goods_cate子分支并上传码云 2.商品管理-商品分类 1.新建文件并配置路由 2.页面布局 3.获取分类列表数据 4.将数据渲染在树形表格控件 ...
《软件测试技术实战：设计、工具及管理》—第1章 1.1节软件测试的基本理论...
本节书摘来自异步社区<软件测试技术实战:设计.工具及管理>一书中的第1章,第1.1节软件测试的基本理论,作者顾翔,更多章节内容可以访问云栖社区"异步社区"公众号查看. ...

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

移动应用实战（移动OA）之四_会议室管理之一相关推荐

最新文章

热门文章