使用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组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...
在"Extjs2分页树 带查询功能"这个主题中,我们将深入探讨如何在ExtJS 2.x版本中实现这样一个功能。 首先,我们需要理解树形结构(Tree)在ExtJS中的工作原理。树形组件(Ext.tree.TreePanel)用于展示层次化的数据...
### Extjs分页遇到的问题:点击下一页时查询条件无法传递 在开发基于Extjs的应用程序时,分页是一项常用且重要...通过以上步骤,可以有效地解决Extjs分页时查询条件无法传递的问题,确保用户能够获得准确的数据结果。
在"extjs2.0 画的一个带查询条件和查询结果的页面"这个主题中,我们主要探讨如何使用ExtJS 2.0版本来设计一个具有搜索功能的用户界面。这个界面包括查询条件输入区域和展示查询结果的区域。 首先,我们需要了解...
Servlet应该能够处理CRUD操作和分页请求,根据请求参数(例如,查询条件、排序字段、分页信息)来查询数据库并返回结果。 在实际开发中,需要结合后台技术(如Java的Spring MVC、PHP的Laravel等)与ExtJS进行交互,...
另外,Hibernate的Criteria API允许我们动态构建查询条件,从而适应不同情况下的分页需求。 在“xxrlmis项目”中,这些技术可能被整合为以下步骤: 1. **前端请求**:ExtJS的Grid Panel向服务器发送包含当前页码和...
在EXTJS中,实现分页后台处理主要是通过与服务器端进行数据交互,利用EXTJS的Store组件和HttpProxy。以下是对EXTJS分页后台处理的详细说明: 首先,`Store`对象是EXTJS中用于存储数据的核心组件。在你的代码中,`...
在EXTJS中,PagingToolbar 是一个非常实用的组件,用于在大数据集上实现分页显示,提升用户体验。然而,在实际使用过程中,我们可能会遇到一些问题,比如在点击“下一页”按钮时,加载的数据与预设的查询条件不符。...
3. **Ajax请求**: 为了将用户的查询提交到服务器并获取结果,会使用ExtJS的Ajax组件或`Ext.Ajax.request`方法,与后端数据库进行通信。 4. **SQL执行**: 后端服务器需要处理接收到的SQL查询,可能使用Java、PHP、...
3. `triggerAction`:控制触发查询的条件,可以是"all"(每次输入都会触发查询)或"query"(输入达到一定长度或用户按下空格键时触发查询)。 4. `minChars`:设置触发查询所需的最少字符数,例如,可以设置为3表示...
ExtJS 工具栏分页事件参数使用说明 ExtJS 是一个流行的 JavaScript 框架,用于构建丰富的互联网应用程序...工具栏分页事件参数是 ExtJS 中一个非常重要的概念,通过设置这些参数,可以实现复杂的数据分页和搜索功能。
6. **Grid组件**:是ExtJS 3.x 中的重要组成部分,用于展示大量表格数据,支持排序、分页、筛选等功能。 7. **Charts**:虽然3.x版本的图表功能相对较弱,但还是提供了基础的图表组件,如柱状图、饼图等,满足基本...
总的来说,EXTJS的树形搜索功能是通过结合TreePanel、TreeStore和过滤机制实现的,它提供了灵活的搜索选项,能够满足不同场景下的数据查找需求。通过深入理解和运用这些知识点,我们可以构建出功能强大、用户体验...
在"extjs实现报表"这个主题中,我们将深入探讨如何利用ExtJS来设计和实现各种类型的报表。 1. **ExtJS报表基础** - **数据绑定**:ExtJS支持双向数据绑定,可以轻松地将数据显示在UI上,并实时更新数据变化。 - *...
在请求参数中,除了查询条件,还需要提供分页信息。成功响应后,数据通常以JSON格式返回,然后解析并加载到数据存储中。 5. **数据解析**:接收到服务器的响应后,需要使用`Ext.util.JSON.decode`将JSON字符串转换...
表格过滤(Grid Filter)是ExtJS Grid提供的一种功能,用户可以根据需求自定义条件,快速筛选出符合特定条件的行,使得数据浏览更加高效。通过在列头设置过滤器,用户可以对每一列的数据进行过滤操作,如文本、数字...
标题中的“ExtJs一张表分页与增删改查”是指使用Ext Js前端框架来实现一个数据表格的分页显示,以及对表格数据进行添加、删除、修改和查询操作的基础功能。这种功能在Web应用程序中非常常见,尤其在管理信息系统中,...
3. **可编辑性**:通过使用CellEditing或RowEditing插件,我们可以实现单元格级别的编辑功能。用户点击单元格时,会弹出一个输入框,编辑完成后自动保存更改。 4. **公式支持**:虽然ExtJS本身不直接支持Excel公式...
- **分页技术**:学习如何在 Extjs 中实现分页功能,提高大型数据集的处理效率。 #### 十三、面板(Panel) - **Panel 组件**:介绍 Panel 组件的功能和用途,这是构建复杂用户界面的基础。 #### 十四、Panel 的...
1. **数据网格(Data Grid)**:ExtJs的数据网格是一种显示大量结构化数据的组件,它支持分页、排序、筛选等多种功能。数据网格通过绑定到数据源(如Store)来显示数据,并且可以对每列应用不同的渲染和操作。 2. *...