一 介绍
在LigerUI中显示表格是用的ligerGrid,同时我们可以通过配置url参数就可以加载远程数据并显示成表格形式。不仅如此,ligerGrid还可以进行数据的排序和分页显示:
(1)排序:需要用到“sortname”和“sortorder”这两个参数,分别表示按哪个字段排序以及排序方式,如:asc,desc
(2)分页显示:需要用到的是”Rows“:[] 和 “Total“:0这两个参数,其中Rows表示页面显示的数据集,需要用一个数组进行赋值;Total表示的是数据的总数
注:我在上一篇文章提到,实际上上面的这些参数都是定义在ligerUI/js/plugins/ligerGrid.js这个文件中,因此这些参数名我们是可以进行自定义的,具体的示例可以参考那篇文章
二 使用服务端数据分页显示示例
(1)简单的前端页面:
">ligerGridDemo2
从上面的代码可以看出,使用了url这个参数请求”loadData.json”来获取数据
(2)后台处理controller:packagecn.zifangsky.controller;importjava.util.ArrayList;importjava.util.HashMap;importjava.util.List;importjava.util.Map;importorg.springframework.context.annotation.Scope;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.ResponseBody;@Controller@Scope("prototype")publicclassLoadDataController{privatestaticfinalintTotal=256;@RequestMapping(value="/loadData.json")@ResponseBody//pagesize和page分别表示每页数据条数和当前的页码publicMaploadData(@RequestParam(value="pagesize")intpagesize,@RequestParam(value="page")intpage){Listlists=newArrayList();//返回数据列表intstart=pagesize*(page-1);//每一页的起始数据//模拟查询一页数据并添加到返回的数据列表中for(inti=0;iresult=newHashMap();result.put("Rows",lists);//数据集result.put("Total",Total);//数据的总数returnresult;}}
在这个controller中只定义了一个方法来处理前台的请求,并且通过获取前台传递进来的”pagesize”和”page”参数进行模拟分页查询数据,代码中有详细注释因此不多说。最后就是将数据的List集合赋值给“Rows”参数,数据总数设置了一个固定的256条
注:上面controller中使用到的实体类User:packagecn.zifangsky.controller;publicclassUser{privateStringusername;privateintage;publicStringgetUsername(){returnusername;}publicvoidsetUsername(Stringusername){this.username=username;}publicintgetAge(){returnage;}publicvoidsetAge(intage){this.age=age;}}