`

ExtJs3带条件的分页查询的实现

 
阅读更多
使用ExtJs的同志们一定知道GridPanel哈~神器一般,非常方便的显示表格类型的数据,例如神马用户列表、产品列表、销售单列表、XXXX列表等。从数据库中查询所需的数据,以列表的形式显示出来,我们理应想到对这种数据实现搜索。
搜索最简单的方法就是reload那个与GridPanel关联的store,将搜索结果存进去,但是最初实现的搜索都把原来GridPanel的那个分页功能给破坏掉了。

原因:
       给store重新载入数据后,PagingToolbar不起作用了,因为ExtJs默认实现的是服务器端分页,即发送带有start、limit参数的请求,通过sql语句进行分页(记得本地分页也是可以实现的,待整理)。
解决方法:
       利用store的“beforeload”事件和baseParams属性。beforeload在store载入数据之前触发,所谓的baseParams,是store每次HTTP请求都会带上的参数,本来它是一个对象的形式,请求时会转化为参数的字符串。

例子:
// 明细账会计区间、时间段、科目,用四个变量存储查询条件
var se_period;
var se_subject;
var se_starttime;
var se_endtime;
// 存储明细账用的JsonStore
var subsidiaryStore = new Ext.data.JsonStore({
        fields: ["date", "voucherNo", "explanation", "debit", "credit"],
        url: 'subsidiaryAction!getSubsidiary.action',
        totalProperty: 'sum',
        root: 'subsidiary',
        listeners: {
                "beforeload": function(store) {
                        store.baseParams = {
                                starttime: se_starttime, 
                                endtime: se_endtime, 
                                subject: se_subject, 
                                period: se_period
                        }
                }
        }
});


// 某用于查找的button上实现的载入方法
buttons: [{
        text: '载入',
        handler: function() {
                se_period = searchPanel.findById('se_period').getValue();
                se_subject = searchPanel.findById('se_subject').getValue();
                se_starttime = searchPanel.findById('se_starttime').getValue();
                se_endtime = searchPanel.findById('se_endtime').getValue();
                        subsidiaryStore.load({
                                params: {
                                        start: 0,
                                        limit: pageSize
                        }
                });
        }
}]

这样在store载入数据时,就会同时提交查询条件啦,后台正常获取那些参数,进行一下判断,查询条件为空时分页取所有数据就可以啦,嗷yeah~
分享到:
评论

相关推荐

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    Extjs2分页树 带查询功能

    在"Extjs2分页树 带查询功能"这个主题中,我们将深入探讨如何在ExtJS 2.x版本中实现这样一个功能。 首先,我们需要理解树形结构(Tree)在ExtJS中的工作原理。树形组件(Ext.tree.TreePanel)用于展示层次化的数据...

    extjs 分页是碰到的问题,点击下一页事,查询条件无法传递

    ### Extjs分页遇到的问题:点击下一页时查询条件无法传递 在开发基于Extjs的应用程序时,分页是一项常用且重要...通过以上步骤,可以有效地解决Extjs分页时查询条件无法传递的问题,确保用户能够获得准确的数据结果。

    extjs2.0 画的一个带查询条件和查询结果的页面

    在"extjs2.0 画的一个带查询条件和查询结果的页面"这个主题中,我们主要探讨如何使用ExtJS 2.0版本来设计一个具有搜索功能的用户界面。这个界面包括查询条件输入区域和展示查询结果的区域。 首先,我们需要了解...

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

    Servlet应该能够处理CRUD操作和分页请求,根据请求参数(例如,查询条件、排序字段、分页信息)来查询数据库并返回结果。 在实际开发中,需要结合后台技术(如Java的Spring MVC、PHP的Laravel等)与ExtJS进行交互,...

    Extjs+Spring+Hibernate实现分页

    另外,Hibernate的Criteria API允许我们动态构建查询条件,从而适应不同情况下的分页需求。 在“xxrlmis项目”中,这些技术可能被整合为以下步骤: 1. **前端请求**:ExtJS的Grid Panel向服务器发送包含当前页码和...

    extjs学习 分页后台处理

    在EXTJS中,实现分页后台处理主要是通过与服务器端进行数据交互,利用EXTJS的Store组件和HttpProxy。以下是对EXTJS分页后台处理的详细说明: 首先,`Store`对象是EXTJS中用于存储数据的核心组件。在你的代码中,`...

    extjs使用pagingtoolbar时,点击下一页,出现查询结果和查询条件不的解决办法

    在EXTJS中,PagingToolbar 是一个非常实用的组件,用于在大数据集上实现分页显示,提升用户体验。然而,在实际使用过程中,我们可能会遇到一些问题,比如在点击“下一页”按钮时,加载的数据与预设的查询条件不符。...

    extjs 在线sql查询

    3. **Ajax请求**: 为了将用户的查询提交到服务器并获取结果,会使用ExtJS的Ajax组件或`Ext.Ajax.request`方法,与后端数据库进行通信。 4. **SQL执行**: 后端服务器需要处理接收到的SQL查询,可能使用Java、PHP、...

    extjs3.x combobox智能联想

    3. `triggerAction`:控制触发查询的条件,可以是"all"(每次输入都会触发查询)或"query"(输入达到一定长度或用户按下空格键时触发查询)。 4. `minChars`:设置触发查询所需的最少字符数,例如,可以设置为3表示...

    ExtJS 工具栏 分页事件参数

    ExtJS 工具栏分页事件参数使用说明 ExtJS 是一个流行的 JavaScript 框架,用于构建丰富的互联网应用程序...工具栏分页事件参数是 ExtJS 中一个非常重要的概念,通过设置这些参数,可以实现复杂的数据分页和搜索功能。

    extjs3.x 官方示例以及chm版api

    6. **Grid组件**:是ExtJS 3.x 中的重要组成部分,用于展示大量表格数据,支持排序、分页、筛选等功能。 7. **Charts**:虽然3.x版本的图表功能相对较弱,但还是提供了基础的图表组件,如柱状图、饼图等,满足基本...

    extjs 树 搜索

    总的来说,EXTJS的树形搜索功能是通过结合TreePanel、TreeStore和过滤机制实现的,它提供了灵活的搜索选项,能够满足不同场景下的数据查找需求。通过深入理解和运用这些知识点,我们可以构建出功能强大、用户体验...

    extjs实现报表

    在"extjs实现报表"这个主题中,我们将深入探讨如何利用ExtJS来设计和实现各种类型的报表。 1. **ExtJS报表基础** - **数据绑定**:ExtJS支持双向数据绑定,可以轻松地将数据显示在UI上,并实时更新数据变化。 - *...

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    在请求参数中,除了查询条件,还需要提供分页信息。成功响应后,数据通常以JSON格式返回,然后解析并加载到数据存储中。 5. **数据解析**:接收到服务器的响应后,需要使用`Ext.util.JSON.decode`将JSON字符串转换...

    ExtJS Filter 实现表格过滤

    表格过滤(Grid Filter)是ExtJS Grid提供的一种功能,用户可以根据需求自定义条件,快速筛选出符合特定条件的行,使得数据浏览更加高效。通过在列头设置过滤器,用户可以对每一列的数据进行过滤操作,如文本、数字...

    ExtJs一张表分页与增删改查

    标题中的“ExtJs一张表分页与增删改查”是指使用Ext Js前端框架来实现一个数据表格的分页显示,以及对表格数据进行添加、删除、修改和查询操作的基础功能。这种功能在Web应用程序中非常常见,尤其在管理信息系统中,...

    extjs模拟excel表格

    3. **可编辑性**:通过使用CellEditing或RowEditing插件,我们可以实现单元格级别的编辑功能。用户点击单元格时,会弹出一个输入框,编辑完成后自动保存更改。 4. **公式支持**:虽然ExtJS本身不直接支持Excel公式...

    Extjs学习带注释

    - **分页技术**:学习如何在 Extjs 中实现分页功能,提高大型数据集的处理效率。 #### 十三、面板(Panel) - **Panel 组件**:介绍 Panel 组件的功能和用途,这是构建复杂用户界面的基础。 #### 十四、Panel 的...

    ExtJs Filter 表格过滤

    1. **数据网格(Data Grid)**:ExtJs的数据网格是一种显示大量结构化数据的组件,它支持分页、排序、筛选等多种功能。数据网格通过绑定到数据源(如Store)来显示数据,并且可以对每列应用不同的渲染和操作。 2. *...

Global site tag (gtag.js) - Google Analytics