人人通后台管理【1】-版本更新功能-显示列表
版本列表页面：
列表显示主要流程：
当点击页面左侧【客户端更新】，就会加载version.jsp，是当文档载入完毕就执行$(function(){ }).
$(function(){}) 是 $(document).ready(function(){}) 的简写，用来在DOM加载完成之后执行一系列预先定义好的函数。
其中，第58行的nengLongInitGrid{}方法初始化表头，第62行中的colModel是operamasks-ui中omGrid的属性，作用是定义该列的各个属性(如表头文字，宽度等)。
第75行中的nengLongSetGridData{}方法初始化列表数据，queryForm是表单ID(第9行)，把表单中的数据提交给action所对应的方法后，把返回的数据加载到grid(第34行)。
53~77中的所有初始化方法都定义在自定义common.js文件里,这里不作介绍。详细请查看本博客中的《common.js文件内容（项目公用js库）》
列表页面代码
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<div id="make-tab">
<ul>
<li><a href="#result">查询结果</a></li>
</ul>
<div id="result">
<div id="query-panel">
<form id="queryForm" action="${basePath }/version/list.do" method="POST" onsubmit="return querySubmit(this);">
<table class="tableUI">
<tr>
<td class="tdLeft4">版本：</td>
<td>
<input name="version" type="text" class="inputUI"/>
</td>
<td class="tdLeft4">发布时间：</td>
<td class="tdRight4">
<input id="beginDateStr" name="beginDate" type="text" class="inputDate" style="width:140px"/> 到 <input id="endDateStr" name="endDate" type="text" class="inputDate" style="width:140px"/>
</td>
</tr>
<tr>
<td class="tdCenter" colspan="4">
<a class="buttonUI" onclick="nengLongSubmitForm('queryForm');"><span class="om-panel-icon icon_toolbar_search"></span>查询</a>
<a class="buttonUI" onclick="nengLongResetForm('queryForm');"><span class="om-panel-icon icon_toolbar_reset"></span>重置</a>
</td>
</tr>
</table>
</form>
</div>
<div id="result-panel">
<div class="toolbarUI">
<p:power url="/version/add.do"><a onclick="addUI()"><span class="om-panel-icon icon_toolbar_add"></span>添加</a></p:power>
</div>
<table id="grid"></table>
</div>
</div>
</div>
<script type="text/javascript">
//打开弹出窗口
function myOpenPopup(tabId, url, title, isIframe){
nengLongAddTab(
"#make-tab",
{tabId:tabId, url:url, title:title},
isIframe
);
}
//添加 function addUI() {略}
//编辑 function editUI(id) {略}
//删除 function removeUI() {略}
//查询 function querySubmit(form){略}
//显示 function view(id) {略}
$(function(){
//初始化
nengLongInitTabs("#make-tab");//初始化页签
nengLongInitQueryPanel("#query-panel");//初始化查询条件Panel
nenglongInitBetweenCalendar("#beginDateStr", "#endDateStr",{dateFormat:"yy-mm-dd H:i:s",showTime:true},{dateFormat:"yy-mm-dd H:i:s",showTime:true});//初始化区间日期
nengLongInitGrid("#grid", {
onRowDblClick:function(rowIndex, rowData, event){ //双击一行记录后执行的方法(详细请查看operamasks-ui)
view(rowData.id);
},
colModel:[
{header:"版本", name:"version", width:"autoExpand", align:"left", sort:"serverSide"},
{header:"下载地址", name:"url", width:400, align:"left", sort:"serverSide"},
$.om.omGrid.columnUI.dateTime({header:"发布时间", name:"pushTime", sort:"serverSide"})
<p:power url="/version/edit.do">
, $.om.omGrid.columnUI.edit({version:"id"})
</p:power>
<p:power url="/version/delete.do">
, $.om.omGrid.columnUI.remove()
</p:power>
]
});
nengLongSetGridData("#grid", "#queryForm");
/* nengLongInputFilter("#queryForm input:text"); */
});
</script>
上面第9行的action中的/version/list.do匹配下面VersionController中的list方法
控制层VersionController.java
注：VersionController类包含对【客户端更新】操作的所有方法，在此只列出对显示列表相关的方法
/**
* 版本更新
* @author JS3-GYQ
*
*/
@Controller
@RequestMapping("/version")
public class VersionController extends AbstractBaseController{
@Resource
private VersionService<Version,VersionForm> versionService;
@RequestMapping("/version")
public String version(Model model) throws Exception{
return "version/version"; // version目录中的version.jsp页面
}
/**
* 显示列表
* @param form
* @param request
* @return pageView
* @throws Exception
*/
@RequestMapping("/list")
@ResponseBody
public PageView<Version> list(VersionForm form,HttpServletRequest request) throws Exception{
PageView<Version> pageView=versionService.findPage(form);
return pageView;
}
}
控制层-服务层-DAO层
下面详细介绍，与该功能相关的 控制层、服务层、DAO层，等内容：
通用Dao层相关结构介绍：
详细请查看本博客的《通用Dao之...》1至5篇
VersionForm类对应关系
版本实体Version.java
/**
* 版本更新实体
* @author JS3-GYQ
*
*/
@Entity
@Table(name ="app_update_info")
@Cacheable
@Cache(usage = CacheConcurrencyStrategy.READ_WRITE)
public class Version extends AbstractEntity{
private static final long serialVersionUID = 1L;
private Long id;
private String version; // 版本号
private Date pushTime; // 发布时间
private String uuids;
private String url; // 下载地址
@JsonIgnore
private VersionContent versionContent; //版本更新内容
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
@Column(name="version",nullable=false,columnDefinition="varchar(32) binary")
public String getVersion() {
return version;
}
public void setVersion(String version) {
this.version = version;
}
@Column(name="pushTime")
public Date getPushTime() {
return pushTime;
}
public void setPushTime(Date pushTime) {
this.pushTime = pushTime;
}
@Transient
public String getUuids() {
return uuids;
}
public void setUuids(String uuids) {
this.uuids = uuids;
}
@Column(name="url")
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
@OneToOne(fetch=FetchType.LAZY,cascade=CascadeType.ALL)
@JoinColumn(name="contentId")
public VersionContent getVersionContent() {
return versionContent;
}
public void setVersionContent(VersionContent versionContent) {
this.versionContent = versionContent;
}
}
版本更新内容实体VersionContent.java
@Entity
@Table(name = "app_update_content")
public class VersionContent extends CommonTimeEntity{
private Long id;
private String content;
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
@Lob
@Column(nullable = false)
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
控制层代码第28行的pageView返回给页面。
可在地址栏输入http://localhost:8080/rrt-webserver-webapp/version/list.do
查看该pageView结构：json数据
{"total":4,"limit":10,"totalPage":1,"start":0,
"rows":[
{"createTime":1438759999000,"updateTime":1438759999000,"createUser":{"id":1,"userCode":"000000000000000001","account":"admin","userTypeId":4,"state":1,"release":true},"updateUser":null,"id":250,"version":"2.1","pushTime":1438759980000,"uuids":null,"url":"/rrt-app/version/ZSRenren.apk"},
{"createTime":1438078419000,"updateTime":1438760088000,"createUser":null,"updateUser":{"id":1,"userCode":"000000000000000001","account":"admin","userTypeId":4,"state":1,"release":true},"id":248,"version":"1.1","pushTime":1438078392000,"uuids":null,"url":"/rrt-app/version/ZSRenren-1.1-150805125253.apk"},
{"createTime":1435280704000,"updateTime":1438078385000,"createUser":null,"updateUser":{"id":1,"userCode":"000000000000000001","account":"admin","userTypeId":4,"state":1,"release":true},"id":247,"version":"1.1","pushTime":1435280642000,"uuids":null,"url":"/rrt-app/version/ZSRenren-1.1-150728181339.apk"},
{"createTime":1435195429000,"updateTime":1436948411000,"createUser":null,"updateUser":{"id":1,"userCode":"000000000000000001","account":"admin","userTypeId":4,"state":1,"release":true},"id":246,"version":"1.0.1","pushTime":1435195421000,"uuids":null,"url":"/rrt-app/version/ZSRenren-1.0-150626090504.apk"}
]
}
版权声明：本文为博主原创文章，未经博主允许不得转载：http://my.oschina.net/gtwo/blog