Extjs分頁使用java實現(xiàn)數(shù)據(jù)庫數(shù)據(jù)查詢

1、Extjs分頁使用java實現(xiàn)數(shù)據(jù)庫數(shù)據(jù)查詢文章分類:Web前端   最近公司做一個項目用到Ext,其中需要用到一個分頁的功能，在網(wǎng)上找了很久，有一些相關(guān)的內(nèi)容，可感覺寫都不是很清晰，而且大多數(shù)都是用ASP或者PHP之類實現(xiàn)的不是很適合我所做的項目，所以經(jīng)過查看Ext方面書籍(輕松搞定Extjs),加上自己摸索，終于完成了適合自己使用的一個關(guān)于Ext分頁功能的實現(xiàn)。項目用的是js、Ext、servlet。下面貼下代碼： var obj = this; var pageSize = 20;   /統(tǒng)計結(jié)果分頁每一頁顯示數(shù)據(jù)條數(shù) /在這里使用Store來創(chuàng)建一個類似于

2、數(shù)據(jù)表的結(jié)構(gòu)，因為需要遠(yuǎn)程獲取數(shù)據(jù)，所以應(yīng)該使用 /HttpProxy類，我是從后臺讀取的是json數(shù)據(jù)格式的數(shù)據(jù)，所以使用JsonReader來解析； var proxy = new Ext.data.HttpProxy(     url:"com.test.check.servlets.QueryDetailServlet" ); var statTime = Ext.data.Record.create(     name:"rowNo",type:"string",m

3、apping:"rowNo",     name:"gpsid",type:"string",mapping:"gpsid",     name:"policeName",type:"string",mapping:"policeName" ); var reader = new Ext.data.JsonReader(     totalProperty:"

4、;count", /此處與后臺json數(shù)據(jù)中相對應(yīng)，為數(shù)據(jù)的總條數(shù)     root:"data"      /這里是后臺json數(shù)據(jù)相對應(yīng) ,statTime); var store = new Ext.data.Store(     proxy:proxy,     reader:reader ); /定義分頁工具條 var bbarObj = new Ext.PagingToolbar(   

5、0; pageSize: pageSize,     store: store,     width: 300,     displayInfo: true,      /該屬性為需要顯示分頁信息是設(shè)置     /這里的數(shù)字會被分頁時候的顯示數(shù)據(jù)條數(shù)所自動替換顯示     displayMsg: '顯示第 0 條到 1 條記錄，一共 2 條',   

6、    emptyMsg: "沒有記錄",     prependButtons: true ); 在我的項目中使用的是GridPanel來進(jìn)行顯示數(shù)據(jù)表，所以定義如下： var grid = new Ext.grid.GridPanel(     store: store,     columns:              heade

7、r:'序號',width: 33, sortable: true,dataIndex:'rowNo',align:'center',          id:'gpsid',header:'GPS編號',width: 85, sortable: true,dataIndex:'gpsid',align:'center',          hea

8、der:'警員名稱',width: 90, sortable: true,dataIndex:'policeName',align:'center'         ,      region:'center',      stripeRows: true,      title:'統(tǒng)計表',    

9、;  autoHeight:true,      width:302,      autoScroll:true,      loadMask:true,      stateful: true,      stateId: 'grid',      columnLines:true,     

10、; bbar:bbarObj   /將分頁工具欄添加到GridPanel上     ); /在以下方法中向后臺傳送需要的參數(shù)，在后臺servlet中可以使用 /request.getParameter("");方法來獲取參數(shù)值； store.on('beforeload',function()            store.baseParams=      

11、        code: code,              timeType: timeType,              timeValue: timeValue     ); /將數(shù)據(jù)載入，這里參數(shù)為分頁參數(shù)，會根據(jù)分頁時候自動傳送后臺 /也是使用

12、request.getParameter("")獲取 store.reload(                                         params:  

13、       start:0,         limit:pageSize     ); duty.leftPanel.add(grid); /將GridPanel添加到我項目中使用的左側(cè)顯示欄 duty.leftPanel.doLayout(); duty.leftPanel.expand();  /左側(cè)顯示欄滑出 后臺servlet獲取前臺傳輸?shù)膮?shù)： response.setContentType("text

14、/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.getPara

15、meter("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(); 下面講以下后臺將從數(shù)據(jù)庫查詢的數(shù)據(jù)組織成前臺需要的格式的json數(shù)據(jù)串 StringBuffer json = new StringBuffe

16、r(); String jsonData = "" . /這里用前臺傳來的參數(shù)進(jìn)行數(shù)據(jù)庫分頁查詢 int startNum = new Integer(start).intValue(); int limitNum = new Integer(limit).intValue(); startNum = startNum + 1; limitNum = startNum + limitNum; . rs = ps.executeQuery(); /這里的count即是前臺創(chuàng)建的數(shù)據(jù)格式中的數(shù)據(jù)總數(shù)名稱，與之對應(yīng)，data同樣 json.append("count:&

17、quot; + count + ",data:"); int i = startNum - 1;  /該變量用來設(shè)置數(shù)據(jù)顯示序號 while(rs.next()        i = i + 1;        /這里的rowNo與前臺配置的數(shù)據(jù)字段名稱想對應(yīng)，下面同樣        json.append("rowNo:'" + i + "'

18、;,");        String gpsId = rs.getString("GPSID");        json.append("gpsid:'" + gpsId + "',");        String policeName = rs.getString("CALLNO");        json.append("po