寫在前面:
最近項目的前框框架用的是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現在也沒有人進行維護了。。尷尬。。)問題待解決，目前只好沒有使用排序字段，直接采用默認的排序。