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對應上，注意大小寫一致。
最后頁面效果如下：