LigerUI中通过加载服务端数据进行表格的分页显示
一 介绍
在LigerUI中显示表格是用的ligerGrid,同时我们可以通过配置url参数就可以加载远程数据并显示成表格形式。不仅如此,ligerGrid还可以进行数据的排序和分页显示:
(1)排序:需要用到“sortname”和“sortorder”这两个参数,分别表示按哪个字段排序以及排序方式,如:asc,desc
(2)分页显示:需要用到的是”Rows“:[] 和 “Total“:0这两个参数,其中Rows表示页面显示的数据集,需要用一个数组进行赋值;Total表示的是数据的总数
注:我在上一篇文章提到,实际上上面的这些参数都是定义在ligerUI/js/plugins/ligerGrid.js这个文件中,因此这些参数名我们是可以进行自定义的,具体的示例可以参考那篇文章
二 使用服务端数据分页显示示例
(1)简单的前端页面:
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> < html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< base href="<%=basePath%>">
< title >ligerGrid Demo2</ title >
< link href = "scripts/ligerUI/skins/Aqua/css/ligerui-all.css"
rel = "stylesheet" type = "text/css" />
< script src = "scripts/jquery/jquery-1.9.0.min.js" type = "text/javascript" ></ script >
< script src = "scripts/ligerUI/js/ligerui.min.js" type = "text/javascript" ></ script >
< script type = "text/javascript" >
$(function() {
var grid = $("#maingrid").ligerGrid({
checkbox : true, //每一行前面的选择框
enabledSort : false,//排序
url : "loadData.json",//从服务端加载数据
columns : [ {
name : 'username',
display : '用户名',
width : 200
}, {
name : 'age',
display : '年龄',
width : 400
} ], //表格中每一列的字段
pageSize : 10, //默认每一页显示多少数据
pageSizeOptions : [ 10, 20, 50, 100 ], //每页显示多少数据下拉选择框
width : 'auto',
height : '95%'
});
});
</ script >
</ head >
< body style = "padding: 10px" >
< div id = "maingrid" ></ div >
</ body >
</ html >
|
从上面的代码可以看出,使用了url这个参数请求”loadData.json”来获取数据
(2)后台处理controller:
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
|
package cn.zifangsky.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller @Scope ( "prototype" )
public class LoadDataController {
private static final int Total = 256 ;
@RequestMapping (value = "/loadData.json" )
@ResponseBody
// pagesize和page分别表示每页数据条数和当前的页码
public Map<String, Object> loadData( @RequestParam (value = "pagesize" ) int pagesize,
@RequestParam (value = "page" ) int page) {
List<User> lists = new ArrayList<User>(); // 返回数据列表
int start = pagesize * (page - 1 ); // 每一页的起始数据
// 模拟查询一页数据并添加到返回的数据列表中
for ( int i = 0 ; i < pagesize; i++) {
int temp = start + i;
// 如果超过总数则跳出循环
if (temp < Total) {
User user = new User();
user.setUsername( "员工-" + temp);
user.setAge(temp);
lists.add(user);
} else
break ;
}
Map<String, Object> result = new HashMap<String, Object>();
result.put( "Rows" , lists); // 数据集
result.put( "Total" , Total); // 数据的总数
return result;
}
} |
在这个controller中只定义了一个方法来处理前台的请求,并且通过获取前台传递进来的”pagesize”和”page”参数进行模拟分页查询数据,代码中有详细注释因此不多说。最后就是将数据的List集合赋值给“Rows”参数,数据总数设置了一个固定的256条
注:上面controller中使用到的实体类User:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
package cn.zifangsky.controller;
public class User {
private String username;
private int age;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this .username = username;
}
public int getAge() {
return age;
}
public void setAge( int age) {
this .age = age;
}
} |
(3)显示效果:
本文转自 pangfc 51CTO博客,原文链接:http://blog.51cto.com/983836259/1767350,如需转载请自行联系原作者