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;