Extjs与java分页数据库查询代码实例

发布时间:2020-07-16编辑:脚本学堂
extjs分页时使用java数据库数据查询的实现代码,统计结果分页每一页显示数据条数,HttpProxy类,从后台读取json数据格式的数据。

Ext分页功能
使用:js、Ext、servlet。

代码:
 

复制代码 代码示例:
var obj = this; 
var pageSize = 20;   //统计结果分页每一页显示数据条数 
//使用Store来创建一个类似于数据表的结构,因为需要远程获取数据,所以应该使用 
//HttpProxy类,从后台读取的是json数据格式的数据,所以使用JsonReader来解析; 
var proxy = new Ext.data.HttpProxy({ 
url:"com.test.check.servlets.QueryDetailServlet" 
}); 
var statTime = Ext.data.Record.create([ 
{name:"rowNo",type:"string",mapping:"rowNo"}, 
{name:"gpsid",type:"string",mapping:"gpsid"}, 
{name:"policeName",type:"string",mapping:"policeName"} 
]); 
var reader = new Ext.data.JsonReader({ 
totalProperty:"count", //此处与后台json数据中相对应,为数据的总条数 
root:"data"      //这里是后台json数据相对应 
},statTime); 
var store = new Ext.data.Store({ 
proxy:proxy, 
reader:reader 
}); 
//定义分页工具条 
var bbarObj = new Ext.PagingToolbar({ 
pageSize: pageSize, 
store: store, 
width: 300, 
displayInfo: true,      //该属性为需要显示分页信息是设置 
//这里数字会被分页时显示数据条数所自动替换显示 
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', 
emptyMsg: "没有记录", 
prependButtons: true 
}); 

在项目中使用GridPanel来进行显示数据表,定义如下: 
 

复制代码 代码示例:
var grid = new Ext.grid.GridPanel({ 
store: store, 
columns: [ 
{header:'序号',width: 33, sortable: true,dataIndex:'rowNo',align:'center'}, 
{id:'gpsid',header:'GPS编号',width: 85, sortable: true,dataIndex:'gpsid',align:'center'}, 
{header:'警员名称',width: 90, sortable: true,dataIndex:'policeName',align:'center'} 
], 
region:'center', 
stripeRows: true, 
title:'统计表', 
autoHeight:true, 
width:302, 
autoScroll:true, 
loadMask:true, 
stateful: true, 
stateId: 'grid', 
columnLines:true, 
bbar:bbarObj   //将分页工具栏添加到GridPanel上 
}); 
//在以下方法中向后台传送需要的参数,在后台servlet中可以使用 
//request.getParameter("");方法来获取参数值; 
store.on('beforeload',function(){ 
store.baseParams={ 
code: code, 
timeType: timeType, 
timeValue: timeValue 

}); 
//将数据载入,这里参数为分页参数,会根据分页时候自动传送后台 
//也是使用request.getParameter("")获取 
store.reload({ 
params:{ 
start:0, 
limit:pageSize 

}); 
duty.leftPanel.add(grid); //将GridPanel添加到我项目中使用的左侧显示栏 
duty.leftPanel.doLayout(); 
duty.leftPanel.expand();  //左侧显示栏滑出 

后台servlet获取前台传输的参数:
 

复制代码 代码示例:
response.setContentType("text/xml;charset=GBK"); 
String orgId = request.getParameter("code"); 
String rangeType = request.getParameter("timeType"); 
String rangeValue = request.getParameter("timeValue"); 
String start  = request.getParameter("start"); 
String limit = request.getParameter("limit"); 
StatService ss = new StatService(); 
String json = ss.getStatByOrganization(orgId, rangeType, rangeValue, start, limit); 
PrintWriter out = response.getWriter(); 
out.write(json); 
out.flush(); 
out.close(); 

将以下后台将从数据库查询的数据组织成前台需要的格式的json数据串:
 

复制代码 代码示例:
StringBuffer json = new StringBuffer(); 
String jsonData = ""; 
...... 
//这里用前台传来的参数进行数据库分页查询 
int startNum = new Integer(start).intValue(); 
int limitNum = new Integer(limit).intValue(); 
startNum = startNum + 1; 
limitNum = startNum + limitNum; 
...... 
rs = ps.executeQuery(); 
//这里的count即是前台创建的数据格式中的数据总数名称,与之对应,data同样 
json.append("{count:" + count + ",data:[{"); 
int i = startNum - 1;  //该变量用来设置数据显示序号 
while(rs.next()){ 
i = i + 1; 
//这里的rowNo与前台配置的数据字段名称想对应,下面同样 
json.append("rowNo:'" + i + "',"); 
String gpsId = rs.getString("GPSID"); 
json.append("gpsid:'" + gpsId + "',"); 
String policeName = rs.getString("CALLNO"); 
json.append("policeName:'" + policeName + "',"); 
json.append("},{"); 

jsonData = json.substring(0, json.length()-2); 
jsonData = jsonData + "]}"; 
//组成的json数据格式应该是: 
//{count:count,data:[{rowNo:rowNo,gpsId:gpsId,policeName:policeName},....]} 
 

完成前台的数据查询交互;