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


    使用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~
     
  • 相关阅读:
    restful规范以及drf框架
    vue的第三方插件,vuex,axios,element-ui ,jq+bs
    路由,生命周期钩子函数,数据间的交互,全局配置js与css
    实例成员补充,项目环境配置以及vue组件
    vue指令实例成员
    初识vue
    django中如何暴露后端任意文件资源
    django中间件以及请求生命流程图
    wraps修饰器
    cookie与session
  • 原文地址:https://www.cnblogs.com/ljb-001/p/6697108.html
Copyright © 2020-2023  润新知