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

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

《ExtJs+Dwr带分页分组传参后台排序功能的grid.docx》由会员分享，可在线阅读，更多相关《ExtJs+Dwr带分页分组传参后台排序功能的grid.docx（42页珍藏版）》请在冰豆网上搜索。

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

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页面

<%@pagelanguage="java"import="java.util.*"pageEncoding="gbk"%>

<%

Stringpath=request.getContextPath（）;

StringbasePath=request.getScheme（）+":

//"+request.getServerName（）+":

"+request.getServerPort（）+path+"/";

%>

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

">

<

<

 usernamerecord.js文件

varwait;

vartotalcost;

varsize;

Ext.onReady（function（）{

waiting（）;

Ext.BLANK_IMAGE_URL="ext-2.2.1/resources/images/default/s.gif";

varstart=0;

varpageSize=18;

varsm=newExt.grid.CheckboxSelectionModel（）;

varcm=newExt.grid.ColumnModel（[newExt.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'

}]）;

varrecordType=newExt.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'

}]）;

varproxy=newExt.data.DWRProxy（RecordService.searchRecord,true）;

vards=newExt.data.GroupingStore（{

proxy:

proxy,

reader:

newExt.data.ListRangeReader（{

id:

'recordid',

totalProperty:

'totalSize'

},recordType）,

remoteSort:

true,

sortInfo:

{

field:

'recordid',

direction:

"ASC"

}

}）;

varpaging=newExt.PagingToolbar（{

pageSize:

16,

//queryParams:

{empName:

''},

store:

ds,

displayInfo:

true,

displayMsg:

'第{0}~{1}条,共{2}条',

emptyMsg:

'无任何记录',

beforePageText:

'第',

afterPageText:

'页',

firstText:

'第一条',

lastText:

'后一条',

prevText:

'上一条',

nextText:

'下一条'

}）;

vargrid=newExt.grid.GridPanel（{

title:

'

store:

ds,

id:

"grid",

cm:

cm,

height:

490,

layout:

"fit",

stripeRows:

true,//斑马线效果

loadMask:

true,//读取数据时的遮罩和提示功能

view:

newExt.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则不能为空，默认为true

blankText:

"用户名不能为空"//当为空时的错误提示信息

},{

xtype:

'button',

icon:

"css/images/group-checked.gif",

cls:

'x-btn-text-icon',

text:

'查询',

handler:

function（）{

varusername=Ext.getCmp（"username"）.getValue（）;

paging.queryParams={username:

username};

paging.doLoad（0）;

}

}],

bbar:

paging,

renderTo:

document.body

}）;

if（wait!

=null）{

wait.hide（）;

}

}）;

functiongetEmployeeInfoAfter（data）{

ds.loadData（data）;

}

functionmsgback（date）{

if（date!

=null）{

Ext.MessageBox.alert（"信息",date）;

}

}

functionwaiting（）{

wait=Ext.Msg.wait（"正在进行处理，请稍后。

。

。

。

。

"）

}

ListRange类:

importjava.io.Serializable;

publicclassListRangeimplementsSerializable{

privatestaticfinallongserialVersionUID=1L;

privateObject[]data;

privateinttotalSize;

publicObject[]getData（）{

returndata;

}

publicvoidsetData（Object[]data）{

this.data=data;

}

publicintgetTotalSize（）{

returntotalSize;

}

publicvoidsetTotalSize（inttotalSize）{

this.totalSize=totalSize;

}

}

Record实体类：

packagecom.chenyan.entity;

importjava.util.Date;

/**

*Recordentity.@authorMyEclipsePersistenceTools

*/

publicclassRecordimplementsjava.io.Serializable{

privatelongrecordid;

privatelonguserid;

privateStringusername;

privatelongcomputerid;

privateDatebegintime;

privateDateendtime;

privateDoublefee;

//Constructors

/**defaultconstructor*/

publicRecord（）{

}

publicRecord（longrecordid,longuserid,Stringusername,longcomputerid,

Datebegintime,Dateendtime,Doublefee）{

this.recordid=recordid;

this.userid=userid;

this.username=username;

puterid=computerid;

this.begintime=begintime;

this.endtime=endtime;

this.fee=fee;

}

/**minimalconstructor*/

publicRecord（longuserid,Stringusername,longcomputerid,Datebegintime）{

this.userid=userid;

puterid=computerid;

this.begintime=begintime;

this.username=username;

}

/**fullconstructor*/

publicRecord（longuserid,Stringusername,longcomputerid,Datebegintime,

Dateendtime,Doublefee）{

this.userid=userid;

this.username=username;

puterid=computerid;

this.begintime=begintime;

this.endtime=endtime;

this.fee=fee;

}

//Propertyaccessors

publiclonggetRecordid（）{

returnthis.recordid;

}

publicStringgetUsername（）{

returnusername;

}

publicvoidsetUsername（Stringusername）{

this.username=username;

}

publicvoidsetRecordid（longrecordid）{

this.recordid=recordid;

}

publiclonggetUserid（）{

returnthis.userid;

}

publicvoidsetUserid（longuserid）{

this.userid=userid;

}

publiclonggetComputerid（）{

returnputerid;

}

publicvoidsetComputerid（longcomputerid）{

puterid=computerid;

}

publicDategetBegintime（）{

returnthis.begintime;

}

publicvoidsetBegintime（Datebegintime）{

this.begintime=begintime;

}

publicDategetEndtime（）{

returnthis.endtime;

}

publicvoidsetEndtime（Dateendtime）{

this.endtime=endtime;

}

publicDoublegetFee（）{

returnthis.fee;

}

publicvoidsetFee（Doublefee）{

this.fee=fee;

}

@Override

publicStringtoString（）{

return"Record[begintime="+begintime+",computerid="+computerid

+",endtime="+endtime+",fee="+fee+",recordid="

+recordid+",userid="+userid+",username="+username

+"]";

}

}

Record.hbm.xml

xmlversion="1.0"encoding="utf-8"?

>

DOCTYPEhibernate-mappingPUBLIC"-//Hibernate/HibernateMappingDTD3.0//EN"

"

--

MappingfileautogeneratedbyMyEclipsePersistenceTools

-->

Record_SEQ

RecordDao接口

publicinterfaceRecordDao{

//ListgetRecord（RecordSearchModelrecordsearchmode,Pagepage）;

intsearchRecordCountByUsername（Stringusername）;

doublesearchRecordTotalCostByUsername（Stringusername）;

ListsearchRecordByUsername（Stringusername,intstart,intco