今天琢磨了半天,终于把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相信大家应该可以搞定的~嘻嘻!
1 楼
chenglnb
2012-05-19
还不错 要是能实现复选框的选定就好了