`
pda158
  • 浏览: 192967 次
社区版块
存档分类
最新评论

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},....]}

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

  希望我的例子对各位有用。
4
0
分享到:
评论

相关推荐

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

    在本文中,我们将探讨如何使用ExtJS框架结合Java实现数据库数据的分页查询。ExtJS是一个强大的JavaScript库,常用于构建桌面级的Web应用程序,而Java则是一种广泛使用的后端开发语言,常用于处理服务器端逻辑。在这...

    extjs 分页

    EXTJS分页通常与数据访问对象(DAO)和动作控制器(Action)结合使用,形成一个完整的数据获取和展示流程。下面将详细阐述EXTJS分页的核心概念、实现方法以及DAO和Action在其中的作用。 一、EXTJS分页核心概念 1. ...

    ExtJs和Java通过Servlet交互实现数据库增删查改分页

    1. **创建ExtJs界面**:使用ExtJs的GridPanel组件展示数据,配置分页条,以及添加、编辑、删除和查询的按钮。每个按钮的点击事件都会触发AJAX请求,向Servlet发送对应的操作指令。 2. **配置Servlet**:在Servlet中...

    SSH+ExtJs分页小例子

    在这个"SSH+ExtJs分页小例子"中,我们将探讨如何将这两种技术结合实现数据分页显示。 首先,我们来看NewsDAO.java文件。这个文件包含了两个关键方法:`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...

    extjs 简单分页例子

    EXTJS是一种基于JavaScript的前端框架,它提供...这是一个基本的EXTJS分页实现,实际应用中可能还需要考虑错误处理、数据过滤、排序等功能。通过这种方式,EXTJS能够帮助开发者高效地构建功能丰富的数据驱动的Web应用。

    extjs+java+mysql通用后台管理

    在“extjs-java-mysql通用后台”这个项目中,开发者通常会定义一系列RESTful API接口,这些接口由Java Spring处理,EXTJS前端通过AJAX调用这些接口,实现数据的增删改查和页面的动态更新。同时,为了保证系统的安全...

    extjs显示数据库

    标题与描述概述的知识点主要涉及使用ExtJS框架结合Java后端技术来展示数据库中的数据。在本案例中,我们关注的是如何使用ExtJS框架显示来自MySQL数据库的信息,并通过Java进行后端处理,将数据转化为JSON格式,以供...

    ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能

    在本示例中,我们将深入探讨如何使用ExtJS实现动态加载grid,同时实现CRUD(创建、读取、更新、删除)操作和分页功能。 首先,让我们了解什么是Grid。在ExtJS中,Grid是一种数据网格组件,用于展示大量结构化数据。...

    Java + ExtJs示例

    例如,使用`java.sql.Connection`建立数据库连接,`Statement`或`PreparedStatement`执行SQL,`ResultSet`处理查询结果。 6. **安全性**:在Java和ExtJS的集成中,必须考虑安全性问题,如防止SQL注入,使用HTTPS...

    ssh+extjs全注解的上传、分页、验证码的demo

    在分页功能中,Hibernate的Criteria或HQL查询语言可以帮助我们实现数据的分页获取。 Spring框架(版本3.2.4)在这个组合中起到了胶水的作用,它负责依赖注入和事务管理。通过Spring的ApplicationContext,我们可以...

    Extjs+Spring+Hibernate实现分页

    3. **数据库操作**:使用Hibernate,根据Pageable对象的参数执行分页查询,获取指定范围的数据。 4. **结果封装**:Spring将查询结果转换为Page或Slice对象,包含了当前页数据及总页数等信息。 5. **响应前端**:将...

    Extjs和数据库交互,增删改查

    在与数据库进行交互时,ExtJS 通常结合服务器端的技术,如PHP、Java、ASP.NET等,实现数据的增删改查操作。下面我们将详细探讨这个主题。 一、ExtJS 数据模型(Model) 在ExtJS中,数据模型(Model)是表示应用...

    SpringMvc+MyBatis+ehcache+ExtJs分页

    至于"ExtJs分页",开发者通常会在后台提供一个能接受页码和每页大小参数的接口,然后在前端Grid组件中配置分页插件,通过AJAX请求获取数据并更新页面。 总之,Spring MVC、MyBatis、Ehcache和ExtJS的组合为构建高...

    extjs入门项目+数据库

    在"extjs入门项目+数据库"中,我们聚焦于如何使用ExtJS来构建一个图书管理系统,并结合Java后端和MySQL数据库实现数据的存储与管理。 **ExtJS框架** ExtJS 提供了一整套组件化的UI元素,如表格、表单、面板、菜单等...

    extjs oracle分页---Json转换

    标题“ExtJS Oracle分页---Json转换”涉及的是在Web应用程序开发中,使用ExtJS框架与Oracle数据库进行分页数据交互,并通过Json格式进行数据转换的技术。以下是对这个主题的详细解释: ExtJS是一个强大的JavaScript...

    Struts2+Json+ExtJS分页

    ### Struts2+Json+ExtJS分页技术详解 #### 一、技术背景与概述 在Web开发领域,实现高效的数据展示与交互是至关重要的。本文档将介绍如何使用Struts2框架结合JSON数据格式以及ExtJS前端库来实现动态分页功能。此...

    extjs后台分页实例

    总的来说,ExtJS后台分页实例展示了如何利用前端的ExtJS组件与后端JSP服务配合,实现数据的分页加载和展示。理解这个过程对于开发大型、数据密集型的Web应用至关重要,因为它能有效提高页面性能,减少不必要的数据...

    extjs 在线sql查询

    在“在线SQL查询”这个场景中,ExtJS 被用来构建一个用户界面,允许用户在浏览器中直接执行SQL查询,这对于数据库管理或数据分析来说非常方便。 `Ext.ux.window.VisualSQLQueryBuilder` 是ExtJS的一个扩展组件,...

Global site tag (gtag.js) - Google Analytics