Extjs分頁使用Java實現數據庫數據查詢
關于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},....]} |
就這樣完成了前臺的數據查詢交互;
希望我的例子對各位有用。
posted on 2014-12-08 21:55 順其自然EVO 閱讀(462) 評論(0) 編輯 收藏 所屬分類: 測試學習專欄 、web 前端性能測試