今天琢磨了半天,终于把ExtJS+S2SH中使用grid加载后台数据以及分页的功能实现了,现在就分享给和我一样新学的童鞋们~加油!!
下面是前台extjs代码:
Ext.onReady(function(){
//初始化ExtJs
Ext.QuickTips.init();
//定义GridPanel的列名称
var cms=new Ext.grid.ColumnModel([
{header:"编号",dataIndex:"id",width:30,align:"center",sortable:true},//添加一个编号
{header:"招聘信息",dataIndex:"newsName"},
{header:"发布时间",dataIndex:"createTime",sortable:true}
]);
cms.defaultSortable = true;
var store=new Ext.data.Store({
reader:new Ext.data.JsonReader({
root:"root",
totalProperty:"totalProperty",//从数据库中读取的总记录数
fields:[{name:'id'},{name:'newsName'},{name:'createTime'}]
}),
proxy:new Ext.data.HttpProxy({
method:"post",
url:"http:localhost:8080/TestUpdate/loadJobNews.action"
})
});
store.load({params:{start:0, limit:5}});
var bbar = new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg : '显示第{0}条到{1}条,一共{2}条',
emptyMsg : '没有记录'
});
var grid=new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
id:"newsGrid",
title:"招聘动态",
autoHeight:true,
autoWidth:true,
autoScroll:false,
store:store,//grid数据源
loadMask:{msg:'加载数据中,请等待......'},
cm:cms,
frame:true,
viewConfig:{
forceFit:true
},
bbar:bbar
});
});
再看看后台的action:
package com.hyit.ttmsoge.action;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.LinkedList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import sun.org.mozilla.javascript.internal.EcmaError;
import com.hyit.ttmsoge.model.JobNews;
import com.hyit.ttmsoge.service.JobNewsService;
import com.opensymphony.xwork2.ActionSupport;
public class JobNewsAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private String start;
private String limit;
private int totalProperty;
public void setTotalProperty(int totalProperty) {
this.totalProperty = totalProperty;
}
public void setStart(String start) {
this.start = start;
}
public void setLimit(String limit) {
this.limit = limit;
}
private JobNewsService jobNewsService;
public void setJobNewsService(JobNewsService jobNewsService) {
this.jobNewsService = jobNewsService;
}
public void getJobNews() throws Exception{
ArrayList<JobNews> jobNewsList=this.jobNewsService.loadJobNews();
if(jobNewsList!=null&&jobNewsList.size()!=0){
this.setTotalProperty(jobNewsList.size());
String returnValue="{totalProperty:"+totalProperty+",root:[";
int index=Integer.parseInt(start);
int pageSize=Integer.parseInt(limit);
System.out.println("start:"+start+"....limit:"+limit);
if(pageSize==0){
pageSize=10;
}
for(int i = index;i < pageSize+index&&i<jobNewsList.size(); i ++){
JobNews jobNews=jobNewsList.get(i);
//list.add(jobNews);
returnValue+="{id:"+jobNews.getId()+",newsName:'"+jobNews.getNewsName()+"',createTime:'"+jobNews.getCreateTime()+"'}";
if(i!=pageSize+index-1){
returnValue+=",";
}
}
returnValue+="]}";
this.sendMsg(returnValue);
}
}
public void sendMsg(String content) throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(content);
}
}
其它的service及dao相信大家应该可以搞定的~嘻嘻!