组件表格-jqGrid

bootstrap.min.css    Bootstrap v3.3.7
bootstrap.min.js    Bootstrap v3.3.7

jquery.min.js    jQuery v2.1.4

<!--v5.6.0-->
jquery.jqGrid.min.js
grid.locale-cn.js

ui.jqgrid-bootstrap.css
ui.jqgrid-bootstrap-ui.css

注意：
bootstrap.min.css 中 使用了Bootstrap 字体图标(Glyphicons)，要 引入 ../fonts ,需要自行下载放到 指定路径下

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.eot
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.eot?#iefix
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.woff2
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.woff
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.ttf
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

html 页面设置 
        <div class="jqGrid_wrapper">
                  <table id="jqGrid"></table>
                  <div id="jqGridPager"></div>
                </div>

function queryUserJqGrid(){
    let page ={'pageSize': 2,'pageNum': 1, 'data':{} }
    $.jgrid.defaults.styleUI = "Bootstrap";
            //初始化右键菜单
            $("#jqGrid").jqGrid({
                url: httpUrl+"/api/manage/user/page",
                datatype : "json",
                ajaxGridOptions: {
                    contentType: "application/json",
                },//post请求需要加
                mtype: "POST",//post请求需要加
                postData: page,
                serializeGridData: function(postData) {
                    return JSON.stringify(postData);
                },//post请求需要加
                
                colNames : ["用户ID", "用户名称","组织编码","组织名称", "创建时间", "状态", "操作" ],
                colModel : [{
                    name : "id",
                    index : "id",
                    width : 50,
                },{
                    name : "userName",
                    index : "userName",
                    width : 50,
                },  {
                    name : "organizationId",
                    index : "organizationId",
                    width : 80
                }, {
                    name : "organizationName",
                    index : "organizationName",
                    width : 80
                },    {
                    name : "createTime",
                    index : "createTime",
                    width : 80
                },   {
                    name : "status",
                    index : "status",
                    width : 50,
                    formatter:function(cellvalue, options, rowObject){
                    }
                },  {
                    name : "id",
                    index : "id",
                    width : 50,
                    formatter:function(cellvalue, options, rowObject){
                        return '<a id="table_'+rowObject.code+'" href="javascript:tableToEdit(\''+rowObject.code+'\');" isOpen="'+rowObject.isOpen+'" code="'+rowObject.code+'"  sortBy="'+rowObject.sortBy+'" name="'+rowObject.name+'" catalogCode="'+rowObject.catalogCode+'" tableName="'+rowObject.tableName+'" showType="'+rowObject.showType+'" isShow="'+rowObject.isShow+'">编辑</a>'
                        +'<a href="javascript:;" style="margin-left:10px" οnclick=deleteRow("'
                         +rowObject.code 
                        + '","'+rowObject.name
                        + '","'+rowObject.catalogCode
                        +'")>删除</a>';
                    } 
                }],
                
                jsonReader: {      
                    root: "data.list",        // 数据模型
                    page: "data.pageNum",    // json中代表当前页码
                    total: "data.pages",        // json中代表页码总数
                    records: "data.total",    // json中代表数据总行数
                    //rows:"pageSize",
                    repeatitems : false      
                },   
                prmNames : {  
                    page:"pageNum", 
                    rows:"pageSize", 
                },
                pager : "#jqGridPager",
                rowList : [ 10, 20, 30 ],
                rowNum : 2,
                rownumbers: true,
                viewrecords : true,显示总记录数
                //multiselect: false,  //可多选，出现多选框
                //multiselectWidth: 25, //设置多选列宽度
                autowidth : true,//自动匹配宽度
                shrinkToFit : true,//当初始化列宽度时候的计算类型,true，则按比例初始化列宽度,false，则列宽度使用colModel指定的宽度
                //height : $(window).height() - 160,
                hidegrid : false,
                refresh : true,
                height: 'auto' 
            }).navGrid('#jqGridPager',{edit:true,add:true,del:true,search:true,refresh:true});
}

function query() {
            var metatableVo = $('#searchForm').serializeJson();
            $("#table_list").jqGrid('clearGridData');  //清空表格
            $("#table_list").jqGrid('setGridParam',{  // 重新加载数据
                url: httpUrl+'/matedata/metadata/metaTables/page',
                datatype : "json",
                ajaxGridOptions: {
                    contentType: "application/json",
                },//post请求需要加
                mtype: "POST",//post请求需要加
                postData:{'data':metatableVo},
                serializeGridData: function(postData) {
                    return JSON.stringify(postData);
                },//post请求需要加
                prmNames : {  
                    page:"pageNum", 
                    rows:"pageSize", 
                },
            }).trigger("reloadGrid");
        }

css加样式：

<style>

  .form-control,

  .single-line {

      border-color: #ccc

  }

  .hr-line-dashed {

      border-top: 1px dashed #ccc;

      color: #fff;

      background-color: #fff;

      height: 1px;

      margin: 20px 0;

  }

  .layui-layer-setwin .layui-layer-close1 {

      background-position: 0px 0px;

      cursor: pointer;

  }

  .layui-layer-close1 {

      cursor: pointer;

      background-position: 0px 0px;

  }

  .ui-jqgrid tr:nth-child(2n-1) {

      background: rgb(245, 245, 245);

  }

  #data_type {

      border: none;

      background: transparent;

  }

</style> 

<style type="text/css">

  .ui-jqgrid .ui-pg-selbox,

  .ui-jqgrid .ui-jqgrid-toppager .ui-pg-selbox {

      padding: 0 0 3px 3px;

  }

</style>

下载

jQuery Grid Plugin – jqGrid » Downloads

其他

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 搜索开源库

bootstrap3 Glyphicons fonts路径 - 简书

jquery.jqGrid.min.js:376 Uncaught TypeError: Cannot read property 'msie' of

Demo

http://guriddo.net/?page_id=119

http://www.guriddo.net/demo/bootstrap/

jqGrid Demos

jqGrid demos-jqGrid实例-中文-mn886.net

WIKI

start - jqGrid Wiki

学习文档

JqGrid 使用方法详解 - ____chen - 博客园

https://www.jb51.net/article/87526.htm

jqGrid 各种参数 详解 - 听雨的人 - 博客园