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

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

2、數(shù)據(jù)表的結(jié)構(gòu)，因?yàn)樾枰h(yuǎn)程獲取數(shù)據(jù)，所以應(yīng)該使用 /HttpProxy類，我是從后臺(tái)讀取的是json數(shù)據(jù)格式的數(shù)據(jù)，所以使用JsonReader來(lái)解析； 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", /此處與后臺(tái)json數(shù)據(jù)中相對(duì)應(yīng)，為數(shù)據(jù)的總條數(shù)     root:"data"      /這里是后臺(tái)json數(shù)據(jù)相對(duì)應(yīng) ,statTime); var store = new Ext.data.Store(     proxy:proxy,     reader:reader ); /定義分頁(yè)工具條 var bbarObj = new Ext.PagingToolbar(   

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

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

7、r:'序號(hào)',width: 33, sortable: true,dataIndex:'rowNo',align:'center',          id:'gpsid',header:'GPS編號(hào)',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)計(jì)表',    

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

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

11、        code: code,              timeType: timeType,              timeValue: timeValue     ); /將數(shù)據(jù)載入，這里參數(shù)為分頁(yè)參數(shù)，會(huì)根據(jù)分頁(yè)時(shí)候自動(dòng)傳送后臺(tái) /也是使用

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

13、       start:0,         limit:pageSize     ); duty.leftPanel.add(grid); /將GridPanel添加到我項(xiàng)目中使用的左側(cè)顯示欄 duty.leftPanel.doLayout(); duty.leftPanel.expand();  /左側(cè)顯示欄滑出 后臺(tái)servlet獲取前臺(tái)傳輸?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(); 下面講以下后臺(tái)將從數(shù)據(jù)庫(kù)查詢的數(shù)據(jù)組織成前臺(tái)需要的格式的json數(shù)據(jù)串 StringBuffer json = new StringBuffe

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

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

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