移动应用实战（移动OA）之四_会议室管理之一
会议室管理是OA系统的常用功能之一，公司里有多个会议室，员工要使用每个会议室前需要预定。
会议室有“查看已有预定”和“预定会议室”两项功能。
当点击“会议室”功能时，首先显示会议室的列表，界面如下：
一、后台部分
后台代码放在原OA项目里，在原OA项目中创建如下包结构：
数据库如下：
1. 实体类通过Hibernate反向工程生成。
2. MeetingRoomDao接口：
public interface MeetingRoomDao {
List<MeetingRoom> getAll();
}public interface MeetingRoomBiz {
List<MeetingRoom> getAll();
}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;
@Resource
private MeetingRoomBiz meetingRoomBiz;
private List<MeetingRoom> meetingRoomList;
@Action(value = "getMeetingRoomAJAX")
public String getMeetingRoomAJAX() {
meetingRoomList = meetingRoomBiz.getAll();
return "getMeetingRoomAJAXOK";
}
// getter & setter
public List<MeetingRoom> getMeetingRoomList() {
return meetingRoomList;
}
public void setMeetingRoomList(List<MeetingRoom> meetingRoomList) {
this.meetingRoomList = 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="images/gg.png" /><br />公告</a></li>
<li><a id="sp" href="sp.html"><img src="images/sp.png" /><br />审批</a></li>
<li><a id="qd" href="qd.html"><img src="images/qd.png" /><br />签到</a></li>
<li><a id="hys" href="hys.html"><img src="images/hys.png" /><br />会议室</a></li>
<li><a id="grxx" href="grxx.html" class="ui-btn-active ui-state-persist"><img src="images/grxx.png" /><br />个人信息</a></li>
</ul>
</div>
</div>
</div>
</body>
</html><script>
$(document).ready(function() {
$("#hys").on("tap",function(){ // 点击会议室按钮，执行ajax功能
$.getJSON("http://localhost:8080/oa/getMeetingRoomAJAX.action?callback=?",
{},
function(data) { // 这时回调函数得到的是一个list
var 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>最后一行：
$("#meetingRoomList").listview("refresh"); //用于刷新列表视图
扫一扫
1351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
