jqGrid实现列表呈现
今日总结:
小菜鸟总是在跌打滚爬中慢慢成长,哈哈!
凡事都有个目的,每一步都是一连串的代码,当遇到问题的时候,千万不要一股脑的尝试然后调试,必须先想想这一步这么做的目的是什么,然后再根据问题分析修改代码,这样比一直调试和修改效率更高,而且对于自身的成长也有很大的帮助。
今天,在尝试使用jqGrid实现列表显示的时候,在实现数据分页的过程中遇到一个问题,其实很简单,但是我硬是搞了一下午。
前台可以将page(当前页)和rows(当前页显示的数据记录数)传给后台,后台根据传递的参数进行计算,实现分页。
startID和endID是数据分页的初始ID和结束ID,然而这两个数据只需要传给数据库,作为sql查询的条件即可,我却想尽办法想要将它们传递给前台来实现分页(根本就没必要),在这个过程中就报了各种错误,什么数据类型转换错误,还有什么变量未定义。
一开始我并没有思考我为什么要传这两个参数,这两个参数目的何在,就是不断尝试解决提示的错误,但是到最后一个问题解决了,就有下一个问题出现,然后就不断解决问题,出现问题,解决问题,恶性循环。结果不但诶呦解决问题,还浪费了很多时间,最后自己也搞得一头雾水。所以综上所述,凡事遇到问题,到要先思考为什么,其目的何在,理清思路,才能更快更好的解决问题。
js代码:
/**
* jQGrid 列表显示
*/
$(function(){
pageInit();
});
function pageInit(){
jQuery("#userList").jqGrid ({
mtype:'POST',
pager : '#userListPager',
// width: 'auto',
height: 400,
rowNum : 30,
rowList : [ 30, 50, 100 ],
viewrecords : true,
multiselect: true,
url: "/appLTEjzxnService/users/list",//请求的action路径
datatype : "json",
jsonReader: {
root:"dataRows", page:"page", total:"total", records:"records", repeatitems:false, id : "userId"
},
colNames : [ '用户ID', '用户账号', '密码','用户名称', '手机号', '邮箱', '状态', '所属组', 'Eoms用户ID','创建时间', '所属公司' ],
colModel : [
{name:'userId',label:'用户ID',index:'userId',width:60} // 这里的name和index保持一致, 与json数据中的key值保持一致
, {name:'userAccount',label:'用户账号',index:'userAccount', width:70}
, {name:'userPassword', label:'密码',index:'userPassword',width:100}
, {name:'userName',label:'用户名称', index:'userName',width:100}
, {name:'userMobile', label:'手机号', index:'userMobile',width:100}
, {name:'userEmail', label:'邮箱',index:'userEmail',width:100}
, {name:'userStatu', label:'状态',index:'userStatu',width:70}
, {name:'groupId', label:'所属组',index:'groupId', width:70}
, {name:'eomsUserId', label:'Eoms用户ID', index:'eomsUserId',width:70}
, {name:'createTime', label:'创建时间',index:'createTime',formatter:"date",formatoptions: {srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'},width:100}
, {name:'companyId', label:'所属公司',index:'companyId', width:70}
],
sortname: 'userId',
sortorder: 'desc',
onSelectRow: function(userId){
}
});
jQuery("#userList").jqGrid('navGrid', '#userListPager', {edit : false,add : false,del : false});
jQuery("#grid_id").jqGrid('setGridParam',{startID:'startID',endID:'endID'}).jqGrid('hideCol',"somecol").trigger("reloadGrid");
}
后台代码:
package me.gacl.web.controller;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import me.gacl.domain.User;
import me.gacl.service.UserServiceI;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONObject;
@Controller
@RequestMapping("/users")
public class UserController {
@Resource
UserServiceI userService;
@RequestMapping(value = "/list", produces = "text/json;charset=UTF-8")
@ResponseBody
public String getAllUser(HttpServletRequest request,
HttpServletResponse response) {
// String sID=request.getParameter("startID");
// String eID=request.getParameter("endID");
// int startID=Integer.parseInt(sID);
// int endID=Integer.parseInt(eID);
String p = request.getParameter("page"); // 取得当前页数,这是jqgrid自身的参数
String r = request.getParameter("rows"); // 取得每页显示行数,这是jqgrid自身的参数
int page=Integer.parseInt(p);
int rows=Integer.parseInt(r);
int records=userService.getUsersCount(); //总的记录数
int totalPage = records %rows == 0 ? records
/ rows : records / rows+ 1; // 计算总页数
List<Object> listGrid = new ArrayList<Object>();
List<User> listUser = userService.getAllUser(page,rows);
for (int i = 0; i < listUser.size(); i++) {
User user = listUser.get(i);// 分类信息
JSONObject jsonTemp = new JSONObject();
jsonTemp.put("userId", user.getUserId());
jsonTemp.put("userAccount", user.getUserAccount());
jsonTemp.put("userPassword", user.getUserPassword());
jsonTemp.put("userName", user.getUserName());
jsonTemp.put("userMobile", user.getUserMobile());
jsonTemp.put("userEmail", user.getUserEmail());
jsonTemp.put("userStatu", user.getUserStatu());
jsonTemp.put("groupId", user.getGroupId());
jsonTemp.put("eomsUserId", user.getEomsUserId());
jsonTemp.put("createTime", user.getCreateTime());
jsonTemp.put("companyId", user.getCompanyId());
listGrid.add(jsonTemp);
}
JSONObject jsonObject = new JSONObject();
jsonObject.put("page", page);
jsonObject.put("total", totalPage);
jsonObject.put("records", records);
jsonObject.put("dataRows", listGrid);
String jsonUsers = jsonObject.toJSONString();
System.out.print(jsonUsers);
return jsonUsers;
}
}