ExtJs+Dwr带分页分组传参后台排序功能的grid.docx

ExtJs+Dwr带分页分组传参后台排序功能的grid主要包含：这个主要用到ExtJS+DWR+Spring+Hibernate,主要包括浏览页（usernamerecord.jsp），脚步文件（usernamerecord.js），dwr分页代理脚本文件（dwrproxy.js），实体类（Record.java），Dao接口（RecordDao），Dao类(RecordDaoImpl)，Service类（RecordServiceImpl），Service接口（RecordService），分页类（ListRange.java），dwr自带（engine.js），ext自带（ext-all.js,ext-base.js,ext-all.css）,(分页底部工具栏)PagingToolbar.js显示结果：usernamerecord.jsp页面 base href= My JSP usernamerecord.jsp starting page usernamerecord.js文件var wait;var totalcost;var size;Ext.onReady(function()waiting();Ext.BLANK_IMAGE_URL=ext-2.2.1/resources/images/default/s.gif;var start=0;var pageSize=18;var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel(new Ext.grid.RowNumberer(),sm, header : 编号,dataIndex : recordid,sortable : true, header : 用户编号,sortable : true,dataIndex : userid, header : 用户名,sortable : true,dataIndex : username,width:150, header : 机器号,sortable : true,dataIndex : computerid, header : 上机时间,sortable : true,dataIndex : begintime,width:230,renderer: Ext.util.Format.dateRenderer(Y年m月d日 H时i分s秒), header : 下机时间,sortable : true,dataIndex : endtime,width:230,renderer: Ext.util.Format.dateRenderer(Y年m月d日 H时i分s秒), header : 消费金额,sortable : true,dataIndex : fee);var recordType = new Ext.data.Record.create(name : recordid,mapping : recordid,type : int, name : userid,mapping : userid,type : int, name : username,mapping : username,type : string, name : computerid,mapping : computerid,type : int, name : begintime,mapping : begintime,type : date, name : endtime,mapping : endtime,type : date, name : fee,mapping : fee,type : float);var proxy = new Ext.data.DWRProxy(RecordService.searchRecord, true);var ds = new Ext.data.GroupingStore(proxy : proxy,reader : new Ext.data.ListRangeReader(id : recordid,totalProperty : totalSize, recordType),remoteSort : true,sortInfo : field : recordid,direction : ASC);var paging=new Ext.PagingToolbar(pageSize: 16, /queryParams :empName:, store: ds, displayInfo: true, displayMsg: 第 0 1 条 , 共 2 条 , emptyMsg: 无任何记录, beforePageText:第, afterPageText:页, firstText: 第一条, lastText : 后一条, prevText : 上一条, nextText : 下一条);var grid = new Ext.grid.GridPanel(title : 按用户名查询记录,store : ds,id:grid,cm : cm,height:490,layout:fit,stripeRows: true, /斑马线效果loadMask: true, /读取数据时的遮罩和提示功能view : new Ext.grid.GroupingView(sortAscText : 正序排列,sortDescText : 倒序排列,columnsText : 列显示/隐藏,groupByText : 根据本列分组,showGroupsText : 是否采用分组显示,groupTextTpl : text(values.rs.length values.rs.length 1 ? Items : Item),tbar:text:请输入要查询的用户名,xtype:textfield,id:username,name: username,allowBlank:false,/false则不能为空，默认为trueblankText:用户名不能为空/当为空时的错误提示信息,xtype:button,icon:css/images/group-checked.gif,cls:x-btn-text-icon,text:查询,handler:function()var username=Ext.getCmp(username).getValue();paging.queryParams = username:username;paging.doLoad(0);,bbar : paging,renderTo:document.body);if(wait!=null)wait.hide(););function getEmployeeInfoAfter(data) ds.loadData(data); function msgback(date)if(date!=null)Ext.MessageBox.alert(信息,date);function waiting()wait=Ext.Msg.wait(正在进行处理，请稍后。)ListRange类:import java.io.Serializable;public class ListRange implements Serializable private static final long serialVersionUID = 1L;private Object data;private int totalSize;public Object getData() return data;public void setData(Object data) this.data = data;public int getTotalSize() return totalSize;public void setTotalSize(int totalSize) this.totalSize = totalSize;Record实体类：package com.chenyan.entity;import java.util.Date;/* * Record entity. author MyEclipse Persistence Tools */public class Record implements java.io.Serializable private long recordid;private long userid;private String username;private long computerid;private Date begintime;private Date endtime;private Double fee;/ Constructors/* default constructor */public Record() public Record(long recordid, long userid, String username, long computerid,Date begintime, Date endtime, Double fee) this.recordid = recordid;this.userid = userid;this.username = username;puterid = computerid;this.begintime = begintime;this.endtime = endtime;this.fee = fee;/* minimal constructor */public Record(long userid,String username, long computerid, Date begintime) this.userid = userid;puterid = computerid;this.begintime = begintime;this.username=username;/* full constructor */public Record(long userid,String username, long computerid, Date begintime,Date endtime, Double fee) this.userid = userid;this.username=username;puterid = computerid;this.begintime = begintime;this.endtime = endtime;this.fee = fee;/ Property accessorspublic long getRecordid() return this.recordid;public String getUsername() return username;public void setUsername(String username) this.username = username;public void setRecordid(long recordid) this.recordid = recordid;public long getUserid() return this.userid;public void setUserid(long userid) this.userid = userid;public long getComputerid() return puterid;public void setComputerid(long computerid) puterid = computerid;public Date getBegintime() return this.begintime;public void setBegintime(Date begintime) this.begintime = begintime;public Date getEndtime() return this.endtime;public void setEndtime(Date endtime) this.endtime = endtime;public Double getFee() return this.fee;public void setFee(Double fee) this.fee = fee;Overridepublic String toString() return Record begintime= + begintime + , computerid= + computerid+ , endtime= + endtime + , fee= + fee + , recordid=+ recordid + , userid= + userid + , username= + username+ ;Record.hbm.xml Record_SEQ RecordDao接口public interface RecordDao /List getRecord(RecordSearchModel recordsearchmode,Page page);int searchRecordCountByUsername(String username);double searchRecordTotalCostByUsername(String username);List searchRecordByUsername(String username,int start,int count,String orderby);RecordDaoImpl类public class RecordDaoImpl extends HibernateDaoSupport implements RecordDao/* * 根据用户名得到所有相关的消费记录 * param start(第几位开始) count(共几个) orderBy(用什么排序) * return list */SuppressWarnings(unchecked)public List searchRecordByUsername(final String username,final int start,final int count,final String orderby) List list=(List)this.getHibernateTemplate().executeFind(new HibernateCallback() public Object doInHibernate(Session session)throws HibernateException, SQLException String hql=from Record r where username=:username order by +orderby;List list =session.createQuery(hql).setString(username, username).setFirstResult(start).setMaxResults(count).list();return list;);return list;/* * 根据用户名得到所有相关的消费记录条数 * param username * return int */public int searchRecordCountByUsername(final String username) int count=this.getHibernateTemplate().execute(new HibernateCallback() public Integer doInHibernate(Session session)throws HibernateException, SQLException String hql=select count(r) from Record r where username=:username;long count=(Long) session.createQuery(hql).setString(username, username).uniqueResult();return (int)count;);return count;/* * 根据用户名得到所有相关的消费记录消费金额 * param username * return double */public double searchRecordTotalCostByUsername(final String username) Double totalcost=this.getHibernateTemplate().execute(new HibernateCallback() public Double doInHibernate(Session session)throws HibernateException, SQLException String hql=select sum(r.fee) from Record r where username=:username ;double totalcost=(Double) session.createQuery(hql).setString(username, username).uniqueResult();return totalcost;);return totalcost;RecordService接口public interface RecordService ListRange searchRecord(Map condition,String orderby);RecordServiceImpl类public class RecordServiceImpl implements RecordServiceprivate RecordDao recordDao;public RecordDao getRecordDao() return recordDao;public void setRecordDao(RecordDao recordDao) this.recordDao = recordDao;public ListRange searchRecord(Map condition,String orderby) String username=StringUtil.trimStr(condition.get(username).toString();int pageIndex = Integer.parseInt(condition.get(start).toString();int pageSize = Integer.parseInt(condition.get(limit).toString();System.out.println(pageIndex);System.out.println(pageSize);System.out.println(orderby);System.out.println(StringUtil.trimStr(condition.get(username).toString();List list = recordDao.searchRecordByUsername(username, pageIndex, pageSize, orderby);int count= recordDao.searchRecordCountByUsername(username);ListRange listRange = new ListRange();listRange.setData(list.toArray();listRange.setTotalSize(count);return listRange;dwrproxy.js文件：Ext.data.DWRProxy = function(dwrCall, pagingAndSort) Ext.data.DWRProxy.superclass.constructor.call(this); this.dwrCall = dwrCall; /this.args = args;this.pagingAndSort = (pagingAndSort!=undefined ? pagingAndSort : true);Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, load : function(params, reader, callback, scope, arg) if(this.fireEvent(beforeload, this, params) != false) var sort; if(params.sort & params.dir) sort = params.sort + + params.dir; else sort = ; var delegate = this.loadResponse.createDelegate(this, reader, callback, scope, arg, 1); var callParams = new Array(); callParams.push(arg.params); callParams.push(sort); callParams.push(delegate); this.dwrCall.apply(this, callParams); else callback.call(scope | this, null, arg, false); , loadResponse : function(listRange, reader, callback, scope, arg) var result; try result = reader.read(listRange); catch(e) this.fireEvent(loadexception, this, null, response, e); callback.call(scope, null, arg, false); return; callback.call(scope, result, arg, true); , update : function(dataSet), updateResponse : function(dataSet) );Ext.data.ListRangeReader = function(meta, recordType) Ext.data.ListRangeReader.superclass.constructor.call(this, meta, recordType); this.recordType = recordType;Ext.extend(Ext.data.ListRangeReader, Ext.data.DataReader, getJsonAccessor: function() var re = /./; return function(expr) try return(re.test(expr) ? new Function(obj, return obj. + expr) : function(obj) return objexpr; ; catch(e) return Ext.emptyFn; ; (),read : function(o)var recordType = this.recordType, fields = recordTtotype.fields;/Generate extraction functions for the totalProperty, the root, the id, and for each fieldif (!this.ef) if(this.meta.totalProperty) this.getTotal = this.getJsonAccessor(this.meta.totalProperty);if(this.meta.successProperty) this.getSuccess = this.getJsonAccessor(this.meta.successProperty);if (this.meta.id) var g = this.getJsonAccessor(this.meta.id);this.getId = function(rec) var r = g(rec);return (r = undefined | r = ) ? null : r; else this.getId = function()return null;this.ef = ;for(var i = 0; i fields.length; i+)f = fields.itemsi;var map = (f.mapping != undefined & f.mapping != null) ? f.mapping : ;this.efi = this.getJsonAccessor(map); var records = ; var root = o.data, c = root.length, totalRecords = c, success = true; if(this.meta.totalProperty) var v = parseInt(this.getTotal(o), 10);if(!isNaN(v)totalRecords = v;if(this.meta.successProperty)var v = this.getSuccess(o);if(v = false | v = false)success = false;for(var i = 0; i c; i+) var n = rooti; var values = ; var id = this.getId(n); for(var j = 0; j fields.length; j+)f = fields.itemsj; var v = this.efj(n); = f.convert(v != undefined) ? v : f.defaultValue); var record = new recordType(values, id); recordsi = record; return success : success, records : records, totalRecords : totalRecords ; );PagingToolbar.js/* * Ext JS Library 2.0 Alpha 1 * Copyright(c) 2006-2007, Ext JS, LLC. * * * /license */* * class Ext.PagingToolbar * extends Ext.Toolbar * A specialized toolbar that is bound to a link Ext.data.Store and provides automatic paging controls. * constructor * Create a new PagingToolbar * param Object config The config object */Ext.PagingToolbar = Ext.extend(Ext.Toolbar, /* * cfg Boolean displayInfo * True to display the displayMsg (defaults to false) */ /* * cfg Number pageSize * The number of records to display per page (defaults to 20) */ pageSize: 20, /* * cfg Number startRowIndex * The number of records to display start index of records (defaults to 0) */ startRowIndex: 0, /* * cfg String displayMsg *