关于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实现数据库数据查询.docx
ExtJs和Java通过Servlet交互实现数据库增删查改分页
c) 标准通用分页查询存储过程设计,为业务系统开发过程中的分页查询提升效率。 d) 灵活稳定的编码分配设计,只需要通过配置即可快速实现可满足各种要求的唯一编码。 e) 健全的汉字拼音管理,收录了常用的3万多汉字的...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
6、可以查看数据库的信息和实现查询分析器的功能,可以很快地看看数据库的信息。 7、实体类快速生成,提供各种常用的实体类代码生成,直接在窗体中显示,并用语法高亮显示,方便拷贝使用。 8、数据库文档的...
c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...
实现的主要功能有:客户端Frame、客户端VAD、异常处理、错误处理、AOP日志管理、计划任务、操作日志管理、数据分页功能、线程池管理、内存缓存管理。主要工具有:系统日志工具、应用属性配置工具、系统属性配置工具...
5、场景对话的功能介绍:通过场景对话模块,开发者可快速搭建满足于不同场景下业务需求的多轮上下文对话,并实现对话式交互同自有产品业务、数据库以及第三方数据源的对接,实现产品服务体验升级。[2] 6、NLP知识库...
c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...
c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...
c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...