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<Object, Object> map = new HashMap<Object, Object>();
           List<Map> ipFlowList = ipFlowService.selectAllIpFlow(map);//我这里的查询关联了其他表所以返回List<Map>
           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：

<div class="jqGrid_wrapper">
    <table id="table_list_2"></table>
    <div id="pager_list_2"></div>
</div>
<script>
$(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);
    });
});

</script>

需要注意的是colModel中的name属性需要与你数组中的map的key对应上，注意大小写一致。
最后页面效果如下：