文章中使用的是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},