定义表格位置
<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调一下就好看了 总体还不错哈哈)