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', '登录名', '真实姓名', '密码', '手机号', '注册日期', '角色', '状态', '操作'],//表头名
            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,//这里是自定义校验规则
                        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://在表格初始化后执行
            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",//设置控件宽度
                // 当开关状态改变时触发
                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);
                        }
                    })
                }
            });
        }

        //状态设置
        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>

后续更多JQGrid相关操作后陆续更新
如：树表格，自定义弹窗等