Ext表格分页

为Grid添加分页工具条

在GridPanel配置中增加以下代码：

bbar:new Ext.PagingToolbar({

        pageSize:10, // 每页显示10条记录

        displayInfo:true,//显示提示信息

        displayMsg:"显示第{0}条到第{1}条,共{2}条数据",

        emptyMsg:"没有数据",

        store:store

    })

这个是在底部增加一个分页工具条，显示效果如图：

 

分页工具条的属性：

pageSize:每页显示多少条数据。

displayInfo:是否显示数据信息。

displayMsg:当displayInfo为true时有效，用来显示有数据时的提示信息。{0},{1},{2}会自动被替换成相应的数据。

emptyMsg:没有数据时显示的信息。

 

注意：如果配置了分页工具条，则store.load()就应该在创建GridPanel之后执行，否则分页工具条将不起作用。

 

13.2后台获取分页数据

使用JSON传输数据，那么需要做下面更改：

1.       Proxy使用HttpProxy，代码：

proxy:newExt.data.HttpProxy({url:'../../../ext_paging.jsp'}),

2.       Reader使用Ext.data.JsonReader，代码：

reader:newExt.data.JsonReader({

         totalProperty:"total",//总共多少条记录

         root:"root",//数据数组

         id:"id",//标识每一条数据，可选

         fields:["id","name","sex","birthday","description"]//包含的数据fields

     })

对应的JSON数据格式：

var json = {total:100,root:[

  {id:0,name:'name0',sex:'man',description:'description0',birthday:'2000-10-20'},

  {id:1,name:'name1',sex:'woman',description:'description1',birthday:'2000-10-20'},

  {id:2,name:'name2',sex:'man',description:'description2',birthday:'2000-10-20'},

  {id:3,name:'name3',sex:'woman',description:'description3',birthday:'2000-10-20'},

  {id:4,name:'name4',sex:'man',description:'description4',birthday:'2000-10-20'},

  {id:5,name:'name5',sex:'woman',description:'description5',birthday:'2000-10-20'},

  {id:6,name:'name6',sex:'man',description:'description6',birthday:'2000-10-20'},

  {id:7,name:'name7',sex:'woman',description:'description7',birthday:'2000-10-20'},

  {id:8,name:'name8',sex:'man',description:'description8',birthday:'2000-10-20'},

  {id:9,name:'name9',sex:'woman',description:'description9',birthday:'2000-10-20'}

  ]

};

Total:对应totalProperty，总共有多少条数据。

Root:对应root，就是返回的实际的数据。

 

3.  初始化时根据store.load()来获取希望的数据，代码：

store.load({

     params:{

         start:0,// 从0开始

         limit:10// 查询10条记录

     }

}); 

后台代码：

Integer start =Integer.parseInt(request.getParameter("start"));

Integer pageSize =Integer.parseInt(request.getParameter("limit"));

 

String json  ="{total:100,root:[";

 

for (inti=start;i<start+pageSize;i++) {

    json += "{id:" + i +",name:'name" + i + "',sex:'" + (i %2 ==0?"man":"woman") + "'}";

    if (i != start + pageSize -1) {

        json += ",";

    }

}

 

json +="]}";

 

response.getWriter().write(json);

 

 

 

13.3分页工具条显示在表格顶部

这个很简单，将bbar改成tbar就可以了。

var grid =newExt.grid.GridPanel({

   el: 'content',

   ds: ds,

   cm:cm,

   autoHeight:true,

   width:700,

   title: 'Jsp Json',

   tbar: newExt.PagingToolbar({

       pageSize: 10,

       store: ds,

       displayInfo: true,

       displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2}条',

       emptyMsg: "没有记录"

   })

});

效果：

 

同时在顶部和底部显示分页工具条，那就同时增加bbar和tbar就可以了。

 

 

 

13.4让Ext支持前台排序

前台排序是指一次性从后台把所有数据都读取到客户端，然后由客户端自动判断每次显示多少条数据。这样，分页时就补用再去后台读取数据了。这对于小数据量的分页是非常有利的。

 

虽然Ext并没有提供内存分页的功能，但是在Example/locale/目录中提供了一个PagingMemoryProxy扩展，它可以让我们从本地数组中读取数据，并进行分页。

 

（1），引入PagingMemoryProxy.js

    <script type="text/javascript"src="../locale/PagingMemoryProxy.js">

</script>

（2），将MemoryProxy改为PagingMemoryProxy。

（3），用store.load({params:{start:0,limit:5}});加载前3条数据。

完整代码：

<linkrel="stylesheet"type="text/css"

    href="../../resources/css/ext-all.css"/>

<scripttype="text/javascript"src="../../adapter/ext/ext-base.js"></script>

<scripttype="text/javascript"src="../../ext-all.js"></script>

<scripttype="text/javascript"src="../locale/PagingMemoryProxy.js"></script>

<scripttype="text/javascript">

Ext.onReady(function() {

    var sm =newExt.grid.CheckboxSelectionModel();

    var cm =newExt.grid.ColumnModel([

            newExt.grid.RowNumberer(),

            sm,

            {

                header : '编号',

                dataIndex : 'id',

                width : 50

            },

            {

                header : '名称',

                dataIndex : 'name',

                width : 100,

                sortable : true

            },

            {

                header : '生日',

                dataIndex : 'birthday',

                width : 100,

                sortable : true,

                /* renderer:new Ext.util.Format.dateRenderer('y-m-d') */

                renderer : function(value) {

                    if (valueinstanceof Date) {

                        returnnew Date(value).format('y-m-d');

                    }

                    return value;

                }

            },

            {

                header : '性别',

                dataIndex : 'sex',

                sortable : true,

                renderer : function(value) {

                    if (value =='man') {

                        return'<spanstyle="color:red;font-weight:bold">'

                                + value + '</span>';

                    }

                    return'<spanstyle="color:green;font-weight:bold">'

                            + value +'</span>';

                }

            }, {

                id : 'descn',

                header : '描述',

                dataIndex : 'description',

                width : 200

            } ]);

    var data = [ ['1','啊','desc1','2000-01-15','man' ],

            [ '2', '得','desc2','2010-01-15','woman' ],

            [ '3', '歌','desc3','2006-01-15','woman' ],

            [ '4', '波','desc4','2009-01-15','man' ],

            [ '5', '此','desc5','2002-01-15','woman' ],

            [ '5', '此','desc5','2002-01-15','woman' ],

            [ '5', '此','desc5','2002-01-15','woman' ],

            [ '5', '此','desc5','2002-01-15','woman' ],

            [ '5', '此','desc5','2002-01-15','woman' ],

            [ '5', '此','desc5','2002-01-15','woman' ],

            [ '5', '此','desc5','2002-01-15','woman' ]];

 

    var store =newExt.data.Store({

        proxy : newExt.data.PagingMemoryProxy(data),

        reader : newExt.data.ArrayReader({}, [ {

            name : 'id',

            mapping : 0

        }, {

            name : 'name',

            mapping : 1

        }, {

            name : 'sex',

            mapping : 4

        }, {

            name : 'description',

            mapping : 2

        }, {

            name : 'birthday',

            mapping : 3

        } ]),

        sortInfo : {

            field: 'name',

            direction : 'ASC'

        }

    });

 

    var grid1 =newExt.grid.GridPanel({

        title : '员工信息',

        renderTo : 'foregroundPagingGrid',

        cm : cm,

        store : store,

        width : 700,

        height : 120,

        autoHeight : true,

        enableColumnMove : false,

        enableColumnResize : true,

        loadMask : true,

        viewConfig : {

            forceFit : true,//表格自动延伸每列的宽度，使之填满整个表格。

            getRowClass : function(record, rowIndex, p, ds) {

                if (rowIndex %2 == 0) {

                    return'oushu-row-color';

                }

                return'jishu-row-color';

            },

            columnsText : "显示的列",

            scrollOffset : 30,//表格右侧为滚动条预留的宽度

            sortAscText : "升序",

            sortDescText : "降序"

        },

        autoExpandColumn : 'descn',

        //sm:sm,

        sm : newExt.grid.RowSelectionModel({

            singleSelect : true

        }),

        bbar : newExt.PagingToolbar({

            pageSize : 5, // 每页显示10条记录

            displayInfo : true, // 显示提示信息

            displayMsg : "显示第{0}条到第{1}条,共{2}条数据",

            emptyMsg : "没有数据",

            store : store

        })

    });

    store.load({params:{start:0,limit:5}});

});

</script>  

 

效果：

 

13.5后台排序

默认情况下，Grid只能对当前页数据进行排序，如果要对所有数据进行排序，则需要将排序信息提交给后台，由后台组装SQL，并将排序后的数据返回页面。

 

服务器排序，需要将Ext.data.Store的remoteSort设置为true，这个属性是指是否能够进行远程排序，默认为false。

var store =newExt.data.Store({

    proxy:newExt.data.HttpProxy({

        url:'../../../ext_paging.jsp'

    }),

    reader : newExt.data.JsonReader({

        totalProperty:"total",

        root:"root"

    }, [ {

        name : 'id',

        mapping : 0

    }, {

        name : 'name',

        mapping : 1

    }, {

        name : 'sex',

        mapping : 4

    }, {

        name : 'description',

        mapping : 2

    }, {

        name : 'birthday',

        mapping : 3

    } ]),

    sortInfo : {

        field : 'name',

        direction : 'ASC'

    },

    remoteSort:true

});
将remoteSort设置为true后，下次排序时会传递2个参数给后台，dir和sort。

Sort：要排序的字段。

Dir:升序还是降序（ASC/DESC）。

 

后台处理的代码：

Integer start =Integer.parseInt(request.getParameter("start"));

Integer pageSize =Integer.parseInt(request.getParameter("limit"));

// 要排序的字段

String sort = request.getParameter("sort");

// 升序还是降序(ASC/DESC)

String dir = request.getParameter("dir");

 

if (dir ==null ||"".equals(dir)) {

    dir = "ASC";

}

 

String json ="{total:100,root:[";

 

if (dir.equals("ASC")) {

    for (inti=start;i<start+pageSize;i++) {

        json += "{id:" + i + ",name:'name" + i +"',sex:'" + (i %2 == 0?"man":"woman") +"'}";

        if (i != start+ pageSize -1) {

            json += ",";

        }

    }

}

else {//降序排

    for (inti=start+pageSize;i>start;i--) {

        json += "{id:" + i + ",name:'name" + i +"',sex:'" + (i %2 == 0?"man":"woman") +"'}";

        if (i != start-1) {

            json += ",";

        }

    }

}

 

json += "]}";

 

response.getWriter().write(json);

 

如果用SQL来实现就更简单了。

‘select * fromt_user_info order by ‘ + sort + ‘ ‘ + dir;