首页 JQuery/JavaScript ExtJs 分页代码祥细解说

ExtJs 分页代码祥细解说

作者:胡同里的砖头 围观群众:993 更新于:2013-12-19

  

ExtJs的分页做的相当出色!在此,我们简单的分析一下它的分页方法,看看它出色的功能!

首先,常规上一个简单的分页程序需要有以下参数:

1. 总记录数            -------根据条件总查询的总记录数

2. 每页显示记录数      -------限制每页显示的最大记录

3. 总页码数            -------总共可以分几页

4. 当前页码            -------当前第几页

5. 查询条件            -------查询和翻页两个地方都要用到

 

 

接下来,要做的就是根据这些参数做一个好看的翻页控件了,原理我不想多解释-------无非是查询出 总记录数,根据 每页显示记录数 算出总页码数,取分页记录数,show到页面上!翻页时仍然要根据查询条件再做一个相同的操作,计算总记录数再分页----因为很有可能查询的总记录数在并发操作中会增多或减少!

 

 

 

其次:ExtJS却让我们从这繁杂的工作中解脱啦!

在GridPanel中使用分页控件需要提供以下参数:

1.总记录数

2.每页显示记录数

3.查询条件

OK,在GridPanel中添加上Ext.PagingToolbar就搞定啦!

例子:

var pgSize=5;   //=====提供每页显示记录数给分页控件

//===============================查询列表=============================
//====================bookDtore======================
var bookProxy=new Ext.data.HttpProxy({url:'getbookList.action'});
// reader
var dataMeta2=new Object({
     totalRecords: "count",    //=======提供总记录数给翻页控件
      record: "Book",
      id: "id"     
});
var bookRecord=new Ext.data.Record.create([
   {name:'bookid',mapping:'id'},
   {name:'booktypeid',mapping:'booktypeid'},
   {name:'bookName',mapping:'bookName'},
   {name:'booktypeName',mapping:'booktypeName'},
   {name:'author',mapping:'author'},
   {name:'price',mapping:'price'},
   {name:'brief',mapping:'brief'},
   {name:'createDate',mapping:'createDate'}
]);
var bookReader=new Ext.data.XmlReader(dataMeta2,bookRecord);
// store
var bookStore=new Ext.data.Store({
   proxy:bookProxy,
   reader:bookReader
});

//====================grid========================
var topBookTypebar=new Ext.Toolbar([
   {text:'新增书籍',iconCls:'add',handler:addBook},
   {text:'修改书籍',iconCls:'edit',handler:editBook},
   {text:'删除书籍',iconCls:'delete',handler:deleteBook}
]);

var sm=new Ext.grid.CheckboxSelectionModel();
// cm
var bookcm=new Ext.grid.ColumnModel([
   sm,
   {header:'书籍名称',dataIndex:'bookName',sortable:true,width:160},
   {header:'书籍类型',dataIndex:'booktypeName',sortable:true,width:160},
   {header:'作者',dataIndex:'author',sortable:true,width:160},
   {header:'创建日期',dataIndex:'createDate',sortable:true,width:160},
   {header:'价格',dataIndex:'price',sortable:true,width:160},
   {header:'备注',dataIndex:'brief',sortable:true,width:160},
   {header:'id',dataIndex:'bookid',sortable:true,hidden:true,width:160}
]);

var bookgrid=new Ext.grid.GridPanel({
   title:'书籍列表',
   frame:true,
   store:bookStore,
   sm:sm,
   cm:bookcm,
   autoHeight:true,
   renderTo:'griddiv',
   tbar:topBookTypebar,
   bbar: new Ext.PagingToolbar({             //-======定义翻页控件
            pageSize:pgSize,                         // 参数1:每页显示数
            store: bookStore,                         // 数据源---非常重要
            displayInfo:true,
            displayMsg:'显示第{0}条数据到{1}条数据,一共有{2}条',
            emptyMsg:'没有记录'
        })
});

bookStore.load({              // -=====页面自动加载
   params:{                       // =====分页参数
    start:0,                          // =====向后台提供 当前页码
    limit:pgSize                 // =====向后台提供 每页显示记录数
   }
});

非常明显:

1.总记录是由给GridPanel提供数据源的Store提供,在它的DataMeta的totalRecords: "results", 参数总提供,当然这是我们Action中计算出来的

2.每页显示的记录数由PagingToolbar的pageSize:pgSize参数提供,因此这个参数一般是我们定义的一个变量

 

有人会问:那查询条件呢??我翻页时候查询条件该怎么获得并传递到后台呢?

这个问题问的非常好!!!!

ExtJs已经为我们解决了这个问题,我们只需要把查询条件放在Store的baseParams参数中就可以了,ExtJS会自动把它放入“隐藏域”,在翻页时调用!

 

demo如下:

var subButton=new Ext.Button({
   text:'查     询',
   handler:function(){
    if(createDate.getValue()!=''){
            var pdate = createDate.getValue();
                var mm = pdate.getMonth() + 1;
                var dd= pdate.getDate();
                var mvalue;
                var dvalue;
                if(mm<10){
                mvalue='-0'+mm;
                }else{
                mvalue='-'+mm;
                }
                if(dd<10){
                dvalue='-0'+dd;
                }else{
                dvalue='-'+dd;
                }
                var strPdate = pdate.getFullYear() + mvalue + dvalue ;
            }
            bookStore.on('beforeload',function(){        // =======翻页时 查询条件
               bookStore.baseParams={
                         'book.bookName':bookName.getValue(),
                         'book.booktype.id':booktypeSelect.getValue(),
                        'book.createDate':strPdate
                       }
            });
         bookStore.reload({                                      // =======翻页时分页参数
                  params:{
                        start:0,
                        limit:pgSize
         }
    });
   }
});
var retButton=new Ext.Button({
   text:'重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置',
   handler:function(){
    form1.getForm().reset();
   }
});

  • 本文标题: ExtJs 分页代码祥细解说
  • 文章分类:【JQuery/JavaScript】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
留言评论
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © huzlblog.com All Rights Reserved. 备案号:苏ICP备2021056683号-8