ExtJS+S2SH：使用Grid加载后台数据并分页（推荐给新学的朋友）

今天琢磨了半天，终于把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相信大家应该可以搞定的~嘻嘻！

评论

2 楼 辉煌之至 2015-08-06  

不会啊，求

1 楼 chenglnb 2012-05-19  

还不错 要是能实现复选框的选定就好了