JQGrid是基于jquery的一套強大的表格插件，近期使用到了，特此記錄下來

引入依賴就不多說啦

<script>
    $(document).ready(function () {

        $.jgrid.defaults.styleUI = 'Bootstrap';//指定主題為Bootstrap

        $("#table_list_2").jqGrid({

            height: 450,
            autowidth: true,
            shrinkToFit: true,
            url: "/user/users",//請求數據地址
            editurl: "/user/oper",//增刪改查操作后臺地址
            datatype: "json",
            rowNum: 10,
            rowList: [10, 15, 25],//分頁屬性
            jsonReader: {//此屬性為對應后臺的json數據轉化
                id: "id",
                root: "data", page: "page", total: "rows",          //   很重要 定義了 后臺分頁參數的名字昼汗。
                records: "totalCount", repeatitems: false
            },
            mtype: "post",//請求方式
            colNames: ['UID', '登錄名', '真實姓名', '密碼', '手機號', '注冊日期', '角色', '狀態(tài)', '操作'],//表頭名
            colModel: [//與colNames一一對應
                {//具體屬性請參考官方文檔
                    name: 'uid',
                    index: 'uid',
                    editable: true,
                    hidedlg: true,
                    width: 60,
                    hidden: true,
                    sorttype: "int",
                    align: "center",
                    search: true,
                    key: true
                },
                {
                    name: 'ucode',
                    index: 'ucode',
                    editrules: {
                        required: true,
                        custom: true,//這里是自定義校驗規(guī)則
                        custom_func: function (value, colNames) {
                            if (!(/^[a-zA-Z0-9_\.]+$/.test(value)) || !(/^\S{5,11}$/.test(value))) {
                                return [false, "登錄名格式錯誤"];
                            } else {
                                return [true, ""];
                            }
                        }
                    },
                    editable: true,
                    width: 80,
                    align: "center",
                    sorttype: "date",
                },
                {
                    name: 'uname',
                    index: 'uname',
                    editable: true,
                    align: "center",
                    width: 80,
                    editrules: {
                        required: true,
                        custom: true,
                        custom_func: function (value, colNames) {
                            if (!(/^[\u4e00-\u9fa5]{2,4}$/.test(value))) {
                                return [false, "姓名格式錯誤"];
                            } else {
                                return [true, ""];
                            }
                        }
                    }
                },
                {
                    name: 'upwd',
                    index: 'upwd',
                    editable: true,
                    hidden: true,
                    align: "center",
                    width: 100,
                    search: false
                },
                {
                    name: 'uphone',
                    index: 'uphone',
                    editable: true,
                    width: 80,
                    align: "center",
                    sorttype: "float",
                    editrules: {
                        required: true,
                        custom: true,
                        custom_func: function (value, colNames) {
                            if (!(/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/.test(value))) {
                                return [false, "手機號格式錯誤"];
                            } else {
                                return [true, ""];
                            }
                        }
                    }
                },
                {
                    name: 'uredate',
                    index: 'uredate',
                    editable: false,
                    width: 80,
                    formatter: "date",//這里是日期格式化器
                    formatoptions:
                        {
                            srcformat: 'Y-m-d H:i:s',
                            newformat: 'Y-m-d H:i:s'
                        },
                    align: "center",
                    sorttype: "date",
                    search: false
                },
                {
                    name: 'rolenames',
                    index: 'rolenames',
                    editable: false,
                    width: 80,
                    align: "center",
                    search: false
                },
                {
                    name: 'ustatus',
                    index: 'ustatus',
                    editable: false,
                    width: 80,
                    formatter:
                    statusFormate,
                    align: "center",
                    search: false
                },
                {
                    name: 'uoper',
                    index: 'uoper',
                    editable: false,
                    width: 80,
                    formatter:
                    operFormate,
                    align: "center",
                    search: false
                }
            ],
            pager: "#pager_list_2",
            viewrecords: true,
            add: true,
            edit: true,
            addtext: 'Add',
            edittext: 'Edit',
            hidegrid: false,
            altRows: true,//單雙行樣式不同
            altclass: 'differ',
            rownumbers: true,
            gridComplete://在表格初始化后執(zhí)行
            genSwitch
        })
        ;

        //初始化swithc
        function genSwitch() {
            $(".checkbox").bootstrapSwitch({
                onText: "正常",      // 設置ON文本
                offText: "禁用",    // 設置OFF文本
                onColor: "success",// 設置ON文本顏色     (info/success/warning/danger/primary)
                offColor: "danger",  // 設置OFF文本顏色        (info/success/warning/danger/primary)
                size: "small",    // 設置控件大小,從小到大  (mini/small/normal/large)
                handleWidth: "35",//設置控件寬度
                // 當開關狀態(tài)改變時觸發(fā)
                onSwitchChange: function (event, data, state) {
                    var uid = $(this).data('id');
                    var type = $(this).data('type');
                    $.ajax({
                        type: 'get',
                        url: '/user/status?uid=' + uid + '&type=' + type,
                        success: function (result) {
                            layer.msg(result.message);

                            /*$("#table_list_2").jqGrid('clearGridData'); //清空表格
                            $("#table_list_2").jqGrid('setGridParam', { // 重新加載數據
                                page: 1
                            }).trigger("reloadGrid");*/
                            jQuery("#table_list_2").trigger("reloadGrid");
                        }, //請求失敗步脓，包含具體的錯誤信息
                        error: function (e) {
                            console.log(e.status);
                        }
                    })
                }
            });
        }

        //狀態(tài)設置
        function statusFormate(cellValue, options, rowObject) {
            var check = "";
            if (cellValue == 0) {
                check = "checked";
            }
            return "<input type='checkbox' " + check + " class='checkbox' data-type=" + rowObject.ustatus + " data-id=" + rowObject.uid + ">";
        }
        genDialog = function (uid) {
            $('#currUser').val(uid);
            layer.open({
                type: 2,
                title: '分配角色',
                maxmin: true,
                shadeClose: true, //點擊遮罩關閉層
                area: ['450px', '400px'],
                content: '/pages/user/user_detail'
            });
        }

        genResetDialog = function (uid) {
                swal({
                    title: "您確定要重置其密碼為123456嗎？",
                    text: "請謹慎操作糠惫！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "確定",
                    cancelButtonText: "取消"
                }).then(function (isConfirm) {
                    console.log(isConfirm);
                    if (isConfirm.value) {
                        $.ajax({
                            type: 'get',
                            url: '/user/newpwd?uid=' + uid + '&newpwd=123456',
                            success: function (result) {
                                swal("重置成功！", "該用戶密碼已重置", "success");
                                jQuery("#table_list_2").trigger("reloadGrid");
                            }, //請求失敗苦始，包含具體的錯誤信息
                            error: function (e) {
                                console.log(e.status);
                            }
                        });
                    } else{
                        swal("已取消", "您取消了操作寞钥！", "error");
                    }
                });
        };

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

        //$.jgrid.gridUnload("filterGrid");//先卸載

        // Setup buttons
        $("#table_list_2").jqGrid('navGrid', '#pager_list_2',
            {
                edit: false,//禁用其自帶的增刪改查按鈕，方便與我們自己添加
                add: false,
                del: false,
                search: false,
                refresh: false,
                view: false,
                position: "left",
                cloneToTop: false
            });
        <@shiro.hasRole name="admin">
        // 添加一個‘添加’按鈕
        $('#table_list_2').navButtonAdd('#pager_list_2',
            {
                buttonicon: "glyphicon glyphicon-plus",
                title: "添加",
                caption: "添加",
                width: 30,
                position: "last",
                onClickButton: function () {
                    jQuery("#table_list_2").jqGrid('editGridRow', "new", {//增加新的一行操作
                        height: 250,
                        closeAfterAdd: true,
                        reloadAfterSubmit: true//添加完成后自動刷新
                    });
                }
            });


        // 添加一個‘編輯’按鈕
        $('#table_list_2').navButtonAdd('#pager_list_2',
            {
                buttonicon: "glyphicon glyphicon-edit",
                position: "last",
                title: "編輯",
                caption: "編輯",
                onClickButton: function () {
                    var gr = jQuery("#table_list_2").jqGrid('getGridParam', 'selrow');
                    if (gr != null) jQuery("#table_list_2").jqGrid('editGridRow', gr, {
                        height: 250,
                        closeAfterEdit: true,
                        reloadAfterSubmit: true
                    });
                    else layer.msg("請選中一行以編輯陌选！");
                }
            });
        </@shiro.hasRole>
        //添加一個‘刪除’按鈕
        $('#table_list_2').navButtonAdd('#pager_list_2',
            {
                buttonicon: "glyphicon glyphicon-trash",
                title: "刪除",
                caption: "刪除",
                position: "last",
                onClickButton: function () {
                    var rowid = jQuery("#table_list_2").jqGrid('getGridParam', 'selrow');//獲取選中行ID
                    var rowData = jQuery("#table_list_2").jqGrid("getRowData", rowid);//根據選中行ID獲取行數據
                    var delUid = rowData.uid
                    if (rowid != null) jQuery("#table_list_2").jqGrid('delGridRow', delUid, {reloadAfterSubmit: true});
                    else layer.msg("請選中一行以刪除理郑！");
                }
            });

        //添加一個‘刷新’按鈕
        $('#table_list_2').navButtonAdd('#pager_list_2',
            {
                buttonicon: "glyphicon glyphicon-refresh",
                title: "刷新",
                caption: "刷新",
                position: "last",
                onClickButton: function () {
                    /*$("#table_list_2").jqGrid('clearGridData'); //清空表格
                    $("#table_list_2").jqGrid('setGridParam', { // 重新加載數據
                        page: 1
                    }).trigger("reloadGrid");*/
                    jQuery("#table_list_2").trigger("reloadGrid");
                }
            });
        //添加一個‘搜索’按鈕
        $('#table_list_2').navButtonAdd('#pager_list_2',
            {
                buttonicon: "glyphicon glyphicon-search",
                title: "搜索",
                caption: "搜索",
                position: "last",
                onClickButton: function () {
                    jQuery("#table_list_2").jqGrid('searchGrid', {sopt: ['cn']});
                }
            });

        // Add responsive to jqGrid
        $(window).bind('resize', function () {
            var width = $('.jqGrid_wrapper').width();
            $('#table_list_2').setGridWidth(width);
        });
    });
</script>

后續(xù)更多JQGrid相關操作后陸續(xù)更新
如：樹表格，自定義彈窗等