jqgrid如何渲染表格数据_jqGrid表格展示简单实例

今天试了一下用jqGrid插件展示表格，里面有当前表格搜索、排序、编辑、分页等很多功能，感觉挺好用的，准备记录一下。

在的Controller中根据条件查询到数据，

import com.alibaba.fastjson.JSONObject;

@Controller

@RequestMapping("user")

public class UserAction {

@RequestMapping(value = {"toIpFlowList.action", "/" }, produces = { "application/json;charset=UTF-8" })

public ModelAndView toIpFlowList() {

Map map = new HashMap();

List ipFlowList = ipFlowService.selectAllIpFlow(map);//我这里的查询关联了其他表所以返回List

String json = JSONObject.toJSONString(ipFlowList); //此行转换为json数组格式的字符串，元素都是Map

view.addObject("ipFlowList",json);

return view;//返回view

}

}

jsp页面中引入bootstrap.min.css、ui.jqgrid.css、grid.locale-cn.js、jquery.jqGrid.min.js：

$(document).ready(function () {

$.jgrid.defaults.styleUI = 'Bootstrap';

var ipFlowList = eval(JSON.stringify(${ipFlowList}));//获取到json数组字符串，再使用eval()重新计算成数组。

$("#table_list_2").jqGrid({

data: ipFlowList,

datatype: 'local',

height: 450,

autowidth: true,

shrinkToFit: true,

rowNum: 20,

rowList: [10, 20, 30],

colNames: ['序号', '用户姓名', 'IP地址', '参数包', '请求日期','请求状态'],

colModel: [

{

name: 'id',

index:'id',

editable: true,

width: 40,

sorttype: "int",

search: true

},

{

name: 'user_name',

index: 'user_name',

editable: false,

width: 40,

search: true

},

{

name: 'ip',

index: 'ip',

editable: false,

width: 70,

},

{

name: 'parameter',

index: 'parameter',

editable: false,

width: 100

},

{

name: 're_date',

index: 're_date',

editable: false,

width: 80

},

{

name: 'result',

index: 'result',

editable: true,

width: 60

/* formatter: "select",

editoptions:{value:"1:登录成功;2:登录失败;}*/

}

],

pager: "#pager_list_2",

viewrecords: true,

caption: "请求日志信息",

addtext: 'Add',

edittext: 'Edit',

hidegrid: false

});

// Add selection

$("#table_list_2").setSelection(4, true);

// Setup buttons

$("#table_list_2").jqGrid('navGrid', '#pager_list_2', {

edit: false,

add: false,

del: false,

search: true

}, {

height: 200,

reloadAfterSubmit: true

});

// Add responsive to jqGrid

$(window).bind('resize', function () {

var width = $('.jqGrid_wrapper').width();

$('#table_list_2').setGridWidth(width);

});

});

需要注意的是colModel中的name属性需要与你数组中的map的key对应上，注意大小写一致。

最后页面效果如下：