extjs学习笔记（三）-----实现grid表格查询分页功能能

最新推荐文章于 2019-06-05 14:42:28 发布

原创最新推荐文章于 2019-06-05 14:42:28 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs4

extjs 专栏收录该内容

6 篇文章

订阅专栏

本文是关于ExtJS4中如何实现Grid表格的查询和分页功能。通过展示JS页面部分的代码，包括获取数据和传递条件数据的逻辑，以及详细解释后台的Controller、Service和DAO层的关键代码，说明了如何利用begin和end参数进行分页，并强调了正确获取总条数和本页起始值的重要性。

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

extjs4 实现grid表格分页功能

1.js页面部分代码
获取数据，传递条件数据代码：

var store = Ext.create('Ext.data.ArrayStore',
            {
        id: "storeId",
        fields: [
            'metting_id',
            'metting_user',
            'metting_date',
            'metting_content',
            'annexNum'],
        proxy: {
            type: 'ajax',
            url: 'getList.action',
            reader: {
                type: 'json',
                totalProperty: 'totalCount',//获得数据总条数参数
                root: 'list'//获得数据参数
            }
        },
        listeners: {  //使用监听事件beforeload进行条件查询
            'beforeload': function (store, op, options) {  
                var params = {  //所需条件
                startdate:Ext.getCmp('startdate').getValue(),
                enddate:Ext.getCmp('enddate').getValue(),

                };  
                Ext.apply(store.proxy.extraParams, params);   
            }  
        } ,

        pageSize:10,//每页条数，传递到后台三个参数 page,start,limit
        autoLoad: true
    })

页面显示代码

bbar: Ext.create('Ext.PagingToolbar', {
              store: store,
              displayInfo: true,
              displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
              emptyMsg: "没有数据"
         }),

2.后台功能代码
controller代码：

@ResponseBody
@RequestMapping("/getList")
    public Map<String, Object > getList(String startdate, String enddate,HttpServletRequest request) throws Exception {
    List<Metting> list;
    List<Metting> list1;
    //获取由前台传递三参数数据 page,start,limit
    int page = Integer.parseInt(request.getParameter("page"));
    int start = Integer.parseInt(request.getParameter("start"));
    int limit = Integer.parseInt(request.getParameter("limit"));
    if (startdate.length() >0|| enddate.length()>0) {
        list1 =mettingService.selectDate(startdate, enddate);
        list = mettingService.selectPage(page, start, limit, startdate, enddate);
        System.out.println("===="+list.size());
    } else {
        list1 =mettingService.selectAll();
         list =mettingService.selectPage(page, start, limit, startdate, enddate);       
    }
    Map<String, Object > map = new HashMap<String, Object>();
    //将从后台获得数据封装到Map中 list 总数据, list1.size() 数据条数
    map.put("list", list);
    map.put("totalCount",list1.size());
    return map;
    }

service层重要代码

//对传递的参数进行计算传递到 dao层
int begin = (page - 1) * limit + 1;
int end = page * limit;

dao层sql语句主要架构

"SELECT * FROM("
    + "SELECT ROWNUM RN,g.* FROM "
    + "( 填写所要查询表格的查询sql语句 )g "
    + ")where RN>=begin and RN<=end";

sql语句中的begin 和end为service传递过来的参数。begin为本页第一行值，end为本页最后一行值。
前台每点击下一页都会再次运行后台重新获得begin和end的值。
分页主要在于获得总条数、本页的开始值和结束值。