jquery的表格插件jqgrid的学习

文章中使用的是bootstrap框架模板中包含的jqgrid插件，通过自己的学习来使用该插件。

我发现jqgrid无法正常显示java代码中的date类型，在项目中我去除了表格中日期的显示。。。

1.简单的内容显示

核心代码

colNames:['标题','正文','作者','浏览量', '回复数'], //每列的名称
colModel:[
	//单行操作图标
	{name:'topictitle',index:'topictitle', width:150,editable:true,editoptions:{maxlength:"20"}},
	{name:'topictext',index:'topictext', width:150,sortable:false,editable:true,edittype:"textarea",editoptions:{maxlength:"200",rows:"10",cols:"20"}},
	{name:'userid',index:'userid', width:60},
	{name:'topicviews',index:'topicviews',width:60,sorttype:"int"},
	{name:'topicreplies',index:'topicreplies',width:60,sorttype:"int"}
],  //设置每列的格式

2.json与SpringMVC交互

注意：后端传输的data的属性名称必须和上述colModel的name属性名相对应，才能够正常显示

前端代码

datatype : "json",
url: "<c:url value="/admin/notice.html"/>", //json的跳转url
mtype: 'post',
jsonReader : {
  root: "rows", //数据
  page: "page", //当前页数
  total: "total", //总页数
  records: "records", //总数据项
  repeatitems: false     
},

后端代码（后端实现分页，采用MyBatis的pagehelper插件）

@RequestMapping(value="/notice.html")
@ResponseBody
public Object noticeAjax(HttpServletRequest request,
		@RequestParam(value="page",required=false, defaultValue="1") int page) {
	//返回的数据
	Map<String, Object> result = new HashMap<String, Object>();
	//传递json
	PageInfo<Topic> pagedNoticeTopics = forumService.getNoticeTopics(page, CommonConstant.PAGE_SIZE);
	int records = pagedNoticeTopics.getSize();
	int total = pagedNoticeTopics.getPages();
	
	result.put("rows", pagedNoticeTopics.getList());
	result.put("page", page);
	result.put("total", total);
	result.put("records", records);
	return result;
}

服务层的分页代码

public PageInfo<Topic> getNoticeTopics(int pageNo,int pageSize) {
	PageHelper.startPage(pageNo, pageSize);
	List<Topic> noticeTopics = topicMapper.selectByNotice();
	PageInfo<Topic> pagedNoticeTopics = new PageInfo<Topic>(noticeTopics);
	return pagedNoticeTopics;
}

3.实现数据的增加、编辑、删除

前端添加编辑的跳转url

editurl: "<c:url value="/admin/noticeEdit.html"/>", //添加、编辑、删除等操作的跳转

后端代码（不知为何，使用SpringMVC的策略，直接入参为Topic会失败，只好一个个入参进行添加）

@RequestMapping(value="/noticeEdit.html")
@ResponseBody
public Object noticeEdit(HttpServletRequest request,
		@RequestParam(value="topictitle",required=false) String topictitle,
		@RequestParam(value="topictext",required=false) String topictext,
		@RequestParam(value="id",required=false) String ids,
		@RequestParam(value="oper",required=false) String oper) { //通过jqgrid传递的oper来识别动作
	if(oper.equals("del")) {
		//删除公告
		List<Topic> noticeTopics = forumService.getNoticeTopics();
		//删除多个公告的处理
		String [] arrIds = ids.split(","); //以逗号分割成String数组
		for(int i=0; i<arrIds.length; i++) {
			int id = new Integer(arrIds[i]); //String转换为int类型
			Topic notice = noticeTopics.get(id-1); //arrayList的get方法来获取第id个数据
			int noticeid = notice.getTopicid();
			forumService.removeNotice(noticeid);
		}
		return "success";
	} else if(oper.equals("add")) {
		//添加公告
		Topic topic = new Topic();
		topic.setTopictitle(topictitle);
		topic.setTopictext(topictext);
			
		User user = getSessionUser(request);
		topic.setUserid(user.getUserid());
		
		forumService.addNotice(topic);
		return "success";
	}
	return "error";
}

4.修改表格数据
由于类的设计为userid而实际表格应该显示username，需要在前端修改表格数据

colModel:[
//单行操作图标
	{name:'topictitle',index:'topictitle', width:150,editable:true,editoptions:{maxlength:"20"}},
	{name:'topictext',index:'topictext', width:150,sortable:false,editable:true,edittype:"textarea",editoptions:{maxlength:"200",rows:"10",cols:"20"}},
	{name:'userid',index:'userid',width:60,formatter:userNameJs},
	{name:'topicviews',index:'topicviews',width:60,sorttype:"int"},
	{name:'topicreplies',index:'topicreplies',width:60,sorttype:"int"}
],  //设置每列的格式

//--------------通过js和jstl来使userid正确显示为username--------------------------
//cellvalue - 当前cell的值  
//options - 该cell的options设置，包括{rowId, colModel,pos,gid}  
//rowObject - 当前cell所在row的值，如{ id=1, name="name1", price=123.1, ...}  
function userNameJs(cellvalue, options, rowObject) {
	<c:forEach var="user" items="${users}">
		if("${user.userid}" == cellvalue)
			return "${user.username}";
	</c:forEach>
					
	return "null";
}

5.后台数据传至下拉框

前端：

{name:'userid',index:'userid',width:60,sortable:false,editable:true,
	edittype:"select",editoptions:{value:getBoardUser()},formatter:userNameJs}, //下拉框编辑

//--------------------显示下拉框的用户数据---------------------
function getBoardUser() {
	//动态生成select内容 
	var str = "";

	$.ajax({
		type : "post",
		async : false, //是否异步：false则必须url中的操作运行完，浏览器才继续运行
		url : "<c:url value="/admin/boardUser.html" />",
		success : function(data) {
			if (data != null) {
				var jsonobj = eval(data);
				var length = jsonobj.length;
				for (var i = 0; i < length; i++) {
						str += jsonobj[i].userid + ":"
								+ jsonobj[i].username + ";";// 这里是option里面的 value:label
				}
				str += "0:null";
			}
		}
	});
	return str;
}

后端：SpringMVC传送List类型的对象

/**
 * 下拉框显示用户数据
 * @param request
 * @return
 */
@RequestMapping(value="/boardUser.html")
@ResponseBody
public Object boardUserAjax(HttpServletRequest request) {
	//传递json
	List<User> users = userService.getAllUsers();
	return users;
}

6.设置主键

主键的值将作为id传给url和editurl之中

{name:'boardid',index:'boardid',hidden:true,key:true},