EXTJS分页技术(转载)
刚学EXT分页的时候搞不清楚他的原理,其实很简单,就是把异步请求的json数据填充到grid中。至于分页实际上只是对一些参数的控制,start,limit还有个重要的参数baseParams.我们经常遇到分页的情况,同时还要对分类的数据进行分页。刚开始学,不分类的数据分页都搞不清楚,更不用说对分类数据进行分页了。我这里总结一下三种情况,供参考,或许对初学者有帮助。第一种:同类数据分页,第二种:分类数据分页。第三种:加combobox分页。
grid分页一定要明白这三个参数的含义。start表示从哪条记录开始,limit表示显示多少条记录pageSize。正如mysql中数据库读取select * from tb_xx limit $start,$limit; 后台将这些查询数据用json格式打印出来就ok了。其余的动作,分页都自动完成了。用firfox+firbug调试一下,打印$start和$limit的值就明白其中的道理了。
简单分页:
Ext代码 复制代码
var client_cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
client_check_select,
{header:'ID',dataIndex:'id',width:40,sortable:true},
.....................................
]);
var person_ds = new Ext.data.Store({
id: 'client_datasource',
proxy: new Ext.data.HttpProxy({url:'grid.php'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'user_name'},
{name: 'ip_addr'}
])
});
var grid = new Ext.grid.GridPanel({
ds: person_ds,
cm: client_cm,
tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
});
person_ds.load({params:{start:0,limit:10}});
后台getParameter. start,limit,各种语言不一样就不用说了。
查询出结果打印json,分页自动完成。
分类数据分页 :经常遇到数据分类管理的情况,同时又要对分类的结果进行分页。以前刚学的时候试着在start,limit上面动手脚,或者采用其它的方式,其实不用那么复杂,做过WEB开发的人都知道,分类分页多传个参数,让多传的这个参数值变化就得了。那这个参数就是通过baseParams传递,这里假定多传的参数为type,见如下代码:
Ext代码 复制代码
var person_ds = new Ext.data.Store({
id: 'client_datasource',
baseParams: {type:0},
proxy: new Ext.data.HttpProxy({url:'grid.php'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'machine_name'},
{name: 'user_name'}
])
});
这里跟上面的区别只是多加了baseParams: {type:0},
type默认值为0,如果要传递更多个参数,直接写在后面就行了。
baseParams: {type: 0 , other: 1}, 或者baseParams: {type: 'all' , other:'not'},
值是传过去了,如何改变baseParams,很简单:
person_ds.baseParams = {type:2}; 加到你的事件中,再reload就可以了。
这个时候后台要做相应的调整:
获取参数start,limit,type......
如查询语句: select * from tb_xx where type='$type'
limit $start,$limit;
打印json搞定。
combobox下拉选择分页 :刚开始我也是不知道如何下手,不知道参数该如何传递,改变limit?还是改变baseParams? 网上找了一些相关的例子,看上去感觉有点复杂,所以自己想搞个简单点的。原理很简单,选中下拉列表某个值的时候去更limit参数值就行了。这个时候我开始想去改变limit的值:
person_ds.reload({params:{start:0,limit:parseInt(comboBox.getValue()}});
这样第一页是没问题,翻页的时候问题就出现了。limit又是10.....记得PagingToolbar有个pageSize参数,更改一下这个值之后就成功了,原来更改pageSize就等于更改了limit的值,代码如下:
Ext代码 复制代码
//分页的下拉框
var pagesize_combo = new Ext.form.ComboBox({
store: page_size_store,
width:50,
readOnly:true,
emptyText: '10',
mode: 'remote',
triggerAction: 'all',
valueField: 'value',
displayField: 'text'
});
//下拉列表事件,更改pageSize.重新加载
pagesize_combo.on("select",function(comboBox){
page_toolbar.pageSize = parseInt(comboBox.getValue());
person_ds.reload({params:{start:0,limit:page_toolbar.pageSize}});
});
//分页工具栏
var page_toolbar = new Ext.PagingToolbar({
region:'south',
pageSize: 10,
store: client_person_ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录",
items:[
' 每页显示记录数量:',
pagesize_combo
]
});
//终于写完了,希望此文对初学者有所帮助。
分享到:
相关推荐
EXTJS分页通常与数据访问对象(DAO)和动作控制器(Action)结合使用,形成一个完整的数据获取和展示流程。下面将详细阐述EXTJS分页的核心概念、实现方法以及DAO和Action在其中的作用。 一、EXTJS分页核心概念 1. ...
在这个"SSH+ExtJs分页小例子"中,我们将探讨如何将这两种技术结合实现数据分页显示。 首先,我们来看NewsDAO.java文件。这个文件包含了两个关键方法:`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...
为了解决这个问题,EXTJS提供了一个名为“树型分页”(Tree Paging)的特性。本文将深入探讨EXTJS树型分页组件的工作原理、实现方法及其实用价值。 1. 树型分页原理 树型分页不同于传统的表格分页,因为它需要处理...
EXTJS是一种基于JavaScript的前端框架,它提供...这是一个基本的EXTJS分页实现,实际应用中可能还需要考虑错误处理、数据过滤、排序等功能。通过这种方式,EXTJS能够帮助开发者高效地构建功能丰富的数据驱动的Web应用。
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...
以下是对EXTJS分页后台处理的详细说明: 首先,`Store`对象是EXTJS中用于存储数据的核心组件。在你的代码中,`Store`被创建并配置了`baseParams`、`JsonReader`和`HttpProxy`。 1. `baseParams`: 这个属性用于传递...
总结来说,实现ExtJS分页查询的关键在于前端和后端的协同工作。前端通过Store、Proxy和Paging Toolbar处理用户交互,后端通过Servlet接收请求,执行数据库操作,并返回符合约定的数据格式。通过这种方式,可以有效地...
总结来说,ExtJS分页是通过前端和后端的协同工作实现的,前端通过ExtJS的Grid和Store组件呈现和管理分页数据,而后端则使用如Spring MVC和SQL Server 2008这样的技术处理分页查询。理解并熟练掌握这些技术对于构建...
在这个场景中,我们关注的是在EXTJS的Combobox(下拉框)组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项,但在大数据集的情况下,一次性加载所有数据可能导致页面性能下降。因此,引入...
ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...
### EXTJS分页全面分析 在本篇内容中,我们将深入了解EXTJS中`GridPanel`分页技术的具体实现方法,并通过实例代码详细解析其工作原理和技术要点。 #### 一、EXTJS GridPanel分页概述 在EXTJS框架中,`GridPanel`...
### Extjs分页遇到的问题:点击下一页时查询条件无法传递 在开发基于Extjs的应用程序时,分页是一项常用且重要...通过以上步骤,可以有效地解决Extjs分页时查询条件无法传递的问题,确保用户能够获得准确的数据结果。
在IT领域,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。它提供了一整套组件,包括表格、树形视图、图表等,帮助开发者创建...理解并熟练掌握这两项技术,对于开发高质量的ExtJS应用至关重要。
至于"ExtJs分页",开发者通常会在后台提供一个能接受页码和每页大小参数的接口,然后在前端Grid组件中配置分页插件,通过AJAX请求获取数据并更新页面。 总之,Spring MVC、MyBatis、Ehcache和ExtJS的组合为构建高...
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...
### Struts2+Json+ExtJS分页技术详解 #### 一、技术背景与概述 在Web开发领域,实现高效的数据展示与交互是至关重要的。本文档将介绍如何使用Struts2框架结合JSON数据格式以及ExtJS前端库来实现动态分页功能。此...
extjs增删改查分页树
在本案例中,我们关注的是"extJs之分页控件",这将涉及如何使用ExtJS实现分页功能,并讨论"ux.Andrie.pPageSize"这个特定的组件。 分页控件通常与数据网格(Grid)或者数据视图(DataView)一起使用,用于处理...
"Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...