前言:我的这一篇文章是紧接着上一篇关于LigerUI的文章(http://www.zifangsky.cn/379.html)写的,因此在这里我就省略了相关的环境搭建,直接进入正题
创新互联专注于南谯网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供南谯营销型网站建设,南谯网站制作、南谯网页设计、南谯网站官网定制、重庆小程序开发服务,打造南谯网络公司原创品牌,更为您提供南谯网站排名全网营销落地服务。
一 介绍
在LigerUI中显示表格是用的ligerGrid,同时我们可以通过配置url参数就可以加载远程数据并显示成表格形式。不仅如此,ligerGrid还可以进行数据的排序和分页显示:
(1)排序:需要用到“sortname”和“sortorder”这两个参数,分别表示按哪个字段排序以及排序方式,如:asc,desc
(2)分页显示:需要用到的是”Rows“:[] 和 “Total“:0这两个参数,其中Rows表示页面显示的数据集,需要用一个数组进行赋值;Total表示的是数据的总数
注:我在上一篇文章提到,实际上上面的这些参数都是定义在ligerUI/js/plugins/ligerGrid.js这个文件中,因此这些参数名我们是可以进行自定义的,具体的示例可以参考那篇文章
二 使用服务端数据分页显示示例
(1)简单的前端页面:
<%@ 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 + "/"; %>"> ligerGrid Demo2
从上面的代码可以看出,使用了url这个参数请求”loadData.json”来获取数据
(2)后台处理controller:
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 loadData(@RequestParam(value = "pagesize") int pagesize,
@RequestParam(value = "page") int page) {
List lists = new ArrayList(); // 返回数据列表
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 result = new HashMap();
result.put("Rows", lists); // 数据集
result.put("Total", Total); // 数据的总数
return result;
}
} 在这个controller中只定义了一个方法来处理前台的请求,并且通过获取前台传递进来的”pagesize”和”page”参数进行模拟分页查询数据,代码中有详细注释因此不多说。最后就是将数据的List集合赋值给“Rows”参数,数据总数设置了一个固定的256条
注:上面controller中使用到的实体类User:
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)显示效果:


标题名称:LigerUI中通过加载服务端数据进行表格的分页显示
分享URL:http://www.jxjierui.cn/article/gsdges.html


咨询
建站咨询
