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

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

2024-09-14 03:53:02   220人阅读

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

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

例子： 
Javascript代码  技术分享
  1. // 明细账会计区间、时间段、科目，用四个变量存储查询条件  
  2. var se_period;  
  3. var se_subject;  
  4. var se_starttime;  
  5. var se_endtime;  
  6. // 存储明细账用的JsonStore  
  7. var subsidiaryStore = new Ext.data.JsonStore({  
  8.         fields: ["date", "voucherNo", "explanation", "debit", "credit"],  
  9.         url: ‘subsidiaryAction!getSubsidiary.action‘,  
  10.         totalProperty: ‘sum‘,  
  11.         root: ‘subsidiary‘,  
  12.         listeners: {  
  13.                 "beforeload": function(store) {  
  14.                         store.baseParams = {  
  15.                                 starttime: se_starttime,   
  16.                                 endtime: se_endtime,   
  17.                                 subject: se_subject,   
  18.                                 period: se_period  
  19.                         }  
  20.                 }  
  21.         }  
  22. });  


Javascript代码  技术分享
  1. // 某用于查找的button上实现的载入方法  
  2. buttons: [{  
  3.         text: ‘载入‘,  
  4.         handler: function() {  
  5.                 se_period = searchPanel.findById(‘se_period‘).getValue();  
  6.                 se_subject = searchPanel.findById(‘se_subject‘).getValue();  
  7.                 se_starttime = searchPanel.findById(‘se_starttime‘).getValue();  
  8.                 se_endtime = searchPanel.findById(‘se_endtime‘).getValue();  
  9.                         subsidiaryStore.load({  
  10.                                 params: {  
  11.                                         start: 0,  
  12.                                         limit: pageSize  
  13.                         }  
  14.                 });  
  15.         }  
  16. }]  

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

 

 

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


联系
我们