Extjs分页使用java实现数据库数据查询

本文介绍如何在ExtJS项目中实现分页功能,通过与Java Servlet交互,查询并展示数据库中的数据。文章详细讲解了创建Store、JsonReader、HttpProxy,以及GridPanel的配置,并展示了Servlet如何接收和处理前端参数,最后将数据库查询结果转换为JSON返回给前端。
摘要由CSDN通过智能技术生成

最近公司做一个项目用到Ext,其中需要用到一个分页的功能,在网上找了很久,有一些相关的内容,可感觉写都不是很清晰,而且大多数都是用ASP或者PHP之类实现的不是很适合我所做的项目,所以经过查看Ext方面书籍(轻松搞定Extjs),加上自己摸索,终于完成了适合自己使用的一个关于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},....]}

就这样完成了前台的数据查询交互;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值