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

本文详细介绍了如何在使用ExtJS的GridPanel时,通过利用store的‘beforeload’事件和baseParams属性,实现在不破坏原有分页功能的情况下,对GridPanel进行高效搜索的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用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~
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值