分享程序员开发的那些事...
更新时间：2022-04-28 01:24:05
大家想想，上节中我们做的表格，如果有成千上万条的数据显示在表格里，然后滚动条查看数据，显然不是什么好办法，而且效率上也不允许。实际上，表格控件对性能的要求较高。在一个页面上放3个表格，就可以感觉到响应变慢。在表格里显示成千上万条数据，效率就可想而知了。
所以说分页是必不可少的，接下来我们就来看EXT提供的分页工具条。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//创建表格 var grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
autoHeight:true,
store:store,
columns:columns, //显示列
stripeRows:true, //斑马线效果
//enableColumnMove: false, //禁止拖放列
//enableColumnResize: false, //禁止改变列宽度
loadMask:true, //显示遮罩和提示功能,即加载Loading……
//forceFit:true //自动填满表格
bbar:new Ext.PagingToolbar({
pageSize:10, //每页显示几条数据
store:store,
displayInfo:true, //是否显示数据信息
displayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据
emptyMsg: "没有记录" //没有数据时显示信息
})
|
得到以下的效果，本次我把界面又换了种黑色风格，如下：
上面的数据只是我简单的在页面静态定义的，但是咱们怎么通过Java后台传递这些数据呢？
我这里用了servlet技术简单处理下：
UserServices.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
package cn.com.shuyangyang.services;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/** * 用户Servlet
* <a href="http://home.51cto.com/index.php?s=/space/1269642" target="_blank">@author</a> shuYangYang
* @email:shuyangyang@aliyun.com
* @website:[url]www.shuyangyang.com.cn[/url]
*/
@SuppressWarnings("serial")
public class UserServices extends HttpServlet {
<a href="http://home.51cto.com/index.php?s=/space/5017954" target="_blank">@Override</a>
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
}
<a href="http://home.51cto.com/index.php?s=/space/5017954" target="_blank">@Override</a>
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String start = req.getParameter("start");
String limit = req.getParameter("limit");
try{
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
System.out.println(index);
System.out.println(pageSize);
String json = "{total:100,root:[";
for(int i = index;i<pageSize+index;i++){
json +="{id:"+i+",name:'name"+i+"',descn:'desc"+i+"'}";
if(i!=pageSize + index - 1){
json+=",";
}
}
json+="]}";
resp.getWriter().write(json);
}catch(Exception e){
e.printStackTrace();
}
}
} |
今晚正在装MySQL数据库，这里就不在数据库读取了，怕浪费时间，我在后台模拟对100条数据进行分页，在获得了start和limit之后生成JSON格式的数据。
获得的数据通过测试程序打印出来，如下：
{totalProperty:100,root:[
{id:0,'name:'name0',descn:'desc0'},{id:1,'name:'name1',descn:'desc1'},{id:2,'name:'name2',descn:'desc2'},{id:3,'name:'name3',descn:'desc3'},
{id:4,'name:'name4',descn:'desc4'},{id:5,'name:'name5',descn:'desc5'},{id:6,'name:'name6',descn:'desc6'},{id:7,'name:'name7',descn:'desc7'},
{id:8,'name:'name8',descn:'desc8'},{id:9,'name:'name9',descn:'desc9'}
]}
请记住这个格式，不管你的后台是神马，是PHP还是C#等，只要满足了这样的格式要求，Ext就可以接受并处理，然后显示到表格中。简单看下JSON数据，totalProperty:100这里表示一共有100条数据。然后就是root:[]，root对应着一个数组，数据里有10个对象，每个对象都有id,name和descn。这10条数据最后就应该显示到表格里。
我的servlet配置如下：
|
1
2
3
4
5
6
7
8
9
|
<servlet>
<servlet-name>userService</servlet-name>
<servlet-class>cn.com.shuyangyang.services.UserServices</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>userService</servlet-name>
<url-pattern>/userServlet</url-pattern>
</servlet-mapping>
|
接下来对表格的属性做下调整：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
//定义列var columns = [
{header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序
{header:'名称',dataIndex:'name',width:80},
{header:'描述',dataIndex:'descn',width:112}
];
//转换原始数据为EXT可以显示的数据var store = new Ext.data.Store({
proxy:{
type:'ajax',
url:'/ExtJs4.2Pro/userServlet',
reader:{
type:'json',
totalProperty:'total',
root:'root',
idProperty:'id'
}
},
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:'name'},
{name:'descn'},
{name:'status'}
]
}); //创建表格var grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
autoHeight:true,
store:store,
width:550,
columns:columns, //显示列
bbar:new Ext.PagingToolbar({
pageSize:25, //每页显示几条数据
store:store,
displayInfo:true, //是否显示数据信息
displayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据
emptyMsg: "没有记录" //没有数据时显示信息
})
}); //加载数据store.load({params:{start:0,limit:25}}); |
OK，大功告成，看下效果：
在这里我发现了个问题，尽管我在前台设置了pageSize为10或者其他数值，但是最终的结果总是第一页显示你设置的条数，第二页就有问题了，暂时还不知道什么原因。知道的麻烦告诉我下。
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1332885，如需转载请自行联系原作者