Baby果冻 发表于 2013-1-29 09:27:50

ExtJS+S2SH:使用Grid加载后台数据并分页(推荐给新学的朋友)

今天琢磨了半天,终于把ExtJS+S2SH中使用grid加载后台数据以及分页的功能实现了,现在就分享给和我一样新学的童鞋们~加油!!
下面是前台extjs代码:

Ext.onReady(function(){//初始化ExtJsExt.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相信大家应该可以搞定的~嘻嘻!
页: [1]
查看完整版本: ExtJS+S2SH:使用Grid加载后台数据并分页(推荐给新学的朋友)