一 介绍
在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，如需转载请自行联系原作者
