Extjs分頁使用java實現資料庫資料查詢

來源:互聯網
上載者:User

標籤: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實現資料庫資料查詢

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.