LigerUI中通过加载服务端数据进行表格的分页显示-创新互联
前言:我的这一篇文章是紧接着上一篇关于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
(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 MaploadData(@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)显示效果:
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页名称:LigerUI中通过加载服务端数据进行表格的分页显示-创新互联
本文网址:http://pwwzsj.com/article/joehp.html