首页 > 代码库 > ExtJs3带条件的分页查询的实现

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;// 存储明细账用的JsonStorevar 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载入数据时,就会同时提交查询条件啦,后台正常获取那些参数,进行一下判断,查询条件为空时分页取所有数据就可以啦,

 

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