ligerUI---ligerGrid分页排序的使用(从后台获取数据显示)
写在前面:
最近项目的前框框架用的是ligerUI,里面用到了ligerGrid表格，下面就来说说从后台获取数据并在前台页面进行完美展示。啊哈哈哈。。(天啦，坐我旁边的丽姐貌似炒股 一个月可以搞几十万，厉害厉害厉害了。。。。)
1.前台页面代码：
roleGrid = $("#roleGrid").ligerGrid(
{
columns: [
{display: '角色编号', name: 'roleId', align: 'left', width: 100, minWidth: 60,},
{display: '角色名', name: 'roleName', minWidth: 120},//hide:'true'
{display: '角色描述', name: 'roleDes', minWidth: 120,},
{display: '角色类型编号', name: 'roleTypeId', minWidth: 120,},
{display: '角色类型', name: 'roleTypeName', minWidth: 120,},
{display: '创建者', name: 'creator', minWidth: 120,},
{display: '创建时间', name: 'cTime', minWidth: 120},
{display: '更新者', name: 'updator', minWidth: 120},
{display: '更新时间', name: 'uTime', minWidth: 120},
{display: '系统编号', name: 'systemId', minWidth: 120,},
{display: '系统名', name: 'systemName', minWidth: 120,},
],
//这里请求之后的数据不用解析 自动生成表格 注意字段要相互对应
url: '${baseURL}/listAllRole.action',
//向后台提交的数据 根据systemId来进行排序
sortName: 'systemId',
//向后台提交的数据 排序方向为升序
sortorder:'asc',
//后台提交的数据 每页显示的记录数
pageSize: 10,
//onSelectRow选择行事件
onSelectRow: function (rowdata, rowindex, rowobj) {
//选中行事件。。。
},
checkbox: false,
height: '100%',
rownumbers: true
});
2.后台action代码：
@Controller("RoleAction")
public class RoleAction extends ActionSupport {
//注入业务层接口
@Resource
private RoleService roleService;
public String roleId;
public String roleName;
public String roleDes;
public String creator;
public String updator;
public String systemId;
public String functionIds;
public String cTime;
public String roleTypeId;
//分页排序 接收对应的字段
//这些都是前台向后台提交的数据 需要自己获取
public String page; //当前页
public String pagesize; //每页大小
public String sortname; //排序字段
public String sortorder; //升序还是降序
//对返回的json数据提供get方法
private JSONObject jsonObject;
public JSONObject getJsonObject() {
return jsonObject;
}
public String listAllRole(){
try{
//获取所有的角色数据 分页排序处理 将分页排序的相关字段传到dao层进行处理 这里不做多解释
List<Role> roleList = roleService.getAllByPage(Role.class,Integer.parseInt(page),Integer.parseInt(pagesize),sortname,sortorder);
//获取总记录数
Integer totalCount = roleService.getCount(Role.class);
List<RoleVO> roleVOList = new ArrayList<>();
//这里都是本项目中对数据的一些处理 可以不用细看 这里不重要
for (int i = 0; i < roleList.size(); i++) {
RoleVO roleVO = new RoleVO();
roleVO.setRoleId(roleList.get(i).getRoleId());
roleVO.setRoleName(roleList.get(i).getRoleName());
roleVO.setRoleDes(roleList.get(i).getRoleDes());
roleVO.setCreator(roleList.get(i).getCreator());
roleVO.setUpdator(roleList.get(i).getUpdator());
roleVO.setSystemId(roleList.get(i).getSystem().getSystemId());
roleVO.setSystemName(roleList.get(i).getSystem().getSystemName());
roleVO.setcTime(roleList.get(i).getcTime());
roleVO.setuTime(roleList.get(i).getuTime());
roleVO.setRoleTypeId(roleList.get(i).getRoleType().getRoleTypeId());
roleVO.setRoleTypeName(roleList.get(i).getRoleType().getRoleTypeName());
roleVOList.add(roleVO);
}
//因为对已ligerGrid 需要的json格式的数据要有Rows ，Total两个字段 这里可以用map集合来做处理
Map<String, Object> map = new HashMap<>();
//Rows装的是记录数据集合
map.put("Rows", roleVOList);
//Rows装的是总的记录数
map.put("Total", totalCount);
//对数据做json格式转换的处理
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor());
jsonObject = JSONObject.fromObject(map, jsonConfig);
java.lang.System.out.println("jsonObject:" + jsonObject);
//{"Total":5,"Rows":[{"cTime":"2017-10-24 00:00:00","creator":123,"roleDes":"测试测试","roleId":33,"roleName":"测试1","roleTypeId":2,"roleTypeName":"技术类型","systemId":1,"systemName":"USM","uTime":"2017-10-24 00:00:00","updator":123}]}
}catch (Exception e){
e.printStackTrace();
}
return SUCCESS;
}
}
其实分页排序与我们平时写的分页排序没有太大的区别 唯一的就是现在用了前端框架，要将这些相关的字段在后台进行接收 然后传到dao层做处理
千万不要以为只要我后台action中的数据返回的格式是json格式，就可以在前台页面中直接获取到然后作显示，那是不可能的。
前台能接收后台的json格式的数据需要做以下处理：
1.首先你的后台返回的json格式的数据要与你前台页面ligerGrid进行显示的字段内容相对应（ligerGrid的Rows与Total是在前台页面进行数据展示需要的两个字段，故后台也对应传这两个字段的json格式数据）：如图：
2.配置struts2返回的结果集视图 设置type=json（我这里用的是struts2的框架 故以struts2框架举例）
<action name="listAll*" class="{1}Action" method="listAll{1}">
<result type="json">
<param name="root">jsonObject</param>
</result>
</action>
3.设置对应action所在的package继承自json-default
<package name="fums" namespace="/" extends="struts-default,json-default">
4.在后台action中将要返回的数据提供get方法
5.在struts.xml中设置返回数据的格式（见第2步中的代码，即设置的<param>部分,这里返回的json格式的数据的名字叫
jsonObject，所以对其进行数据源过滤）
成功啦成功啦~~~~~~~~~~~~~~~~~~~~~~
然后也可以点击上一页下一页进行分页啦。。。。。截图就不再展示了。。。。。
==========可爱滴分割线=============
后续所遇问题：
由于测试的时候发现了一个问题，首先我们在前台页面指定按照systemId排序，每页显示pagesize为8，然后第一页是可以正常显示数据的，
但是当我们点击下一页进行切换的时候，问题就出来了，数据显示不完整，如下图，举例说明：
在数据库中的数据：
在页面显示的数据：
如果正常显示的话，点击下一页，则页面显示的是数据库中排序后的第二页显示数据，但是 现在 缺少了角色名为77的数据，并且角色名为aaa的数据重复了。
猜想是不是因为在前台点击切换页码时，并没有把排序字段发送到后台，（做了测试，在后台dao层里面直接写死按照systemId排序，不接收来自前台页面的
sortname字段数据，结果还是不行），经过测试，并不是因为因为排序字段的问题，猜想是不是点击下一页的时候调用的api是默认按照数据库表主键进行排序的。
(不想去看api代码了，就这样吧，听说ligerUI现在也没有人进行维护了。。尴尬。。)问题待解决，目前只好没有使用排序字段，直接采用默认的排序。
