jqgrid表格常用属性

定义表格位置

<div class="main-container" id="main-container">
    <div class="page-content">
        <div  class="form-group">
            <div class="col-xs-12">
                <h3>jqgrid表格</h3>
            </div>
        </div>       
        <div  class="form-group">
            <div class="col-xs-12">
               <table id="gridTable"></table>
               <div id="gridPager"></div>
            </div>
        </div>    
    </div>
</div>

<script type="text/javascript">
$(function(){   //设置表格自适应  宽度等于page-content宽度
  $(window).on('resize.jqGrid',function(){
      $("gridTable").jqGrid('setGridWidth',
           $(".page-content").width());
  });
  GetGrid();
});
function GetGrid(){
$("#gridTable").jqGrid({
url:"aaa.txt",    
datatype:"json",  
mtype:"get",   //ajax提交方式post get 默认是get
//multiselect:true,    //多选按钮
//multiselectWidth:20,    //多选列宽度
height:"auto",   
autowidth:true,   //宽度自动 也可在colModel设置每列宽度
colNames:["Id","姓名","年龄","身高","爱好"],
colModel:[
    {name:"id",index:"id",align:"center",hidden:false},
    {name:"name",index:"name",align:"center",hidden:false},
    {name:"age",index:"age",align:"center",hidden:false},
    {name:"sg",index:"sg",align:"center",hidden:false},
    {name:"love",index:"love",align:"center",hidden:false}
],
viewrecords:true,   //是否显示总记录数
rowNum:5,           //每页记录数
rowList:[5,10,15],   // 每页记录数可选项
pager:"#gridPager",
//sortable:true,        //是否可排序
//sortname:"id",        //排序列名，这个参数会被传到后台
//sortorder:"asc",      //排序顺序asc升序desc降序
rownumber:true,       //序号列是否显示（不显示名称QWQ）
rownumWidth:50,       //序号列宽度
gridview:true,        //构造一行数据后添加到grid中
loadComplete:function(){
   var  t=this;
   setTimeout(function(){
       updatePageIcons(t);
   },0);
}
});
$(window).triggerHandler('resize.jqGrid');
}
</script>

aaa.txt文本静态数据

{
  "total": "1",
  "page": "1",
  "records": "6",
  "rows" : [
    { "id" :"41", "name" :"张三", "age" :"56", "sg" :"176", "love" :"篮球"},
    { "id" :"22", "name" :"李四", "age" :"43", "sg" :"155", "love" :"象棋"},
    { "id" :"42", "name" :"张三", "age" :"56", "sg" :"176", "love" :"篮球"},
    { "id" :"21", "name" :"李四", "age" :"43", "sg" :"155", "love" :"象棋"},
    { "id" :"1", "name" :"张三", "age" :"56", "sg" :"176", "love" :"篮球"},
    { "id" :"3", "name" :"王五", "age" :"56", "sg" :"183", "love" :"lol"}
  ]
}

显示效果

显示序号列 添加双表头

$("#gridTable").jqGrid('setGroupHeaders', {
    useColSpanStyle: true,   //是否合并表头
    groupHeaders: [
    { startColumnName: 'name', numberOfColumns: 4, titleText: '个人信息' }
    ]
});
$("#gridTable").jqGrid('setLabel', 'rn', '序号'); //显示序号列名称

效果

（效果比较丑，但是效果出来了QWQ，可以找ui调一下就好看了 总体还不错哈哈）