標籤:http io ar os 使用 java sp for 資料
關於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},....]}
就這樣完成了前台的資料查詢互動;
希望我的例子對各位有用。
Extjs分頁使用java實現資料庫資料查詢