jqGrid插件的基本使用

相关插件

<link rel="stylesheet" href="../../../css/ui.jqgrid.css" />

<script src="../../../js/jquery-2.1.4.min.js"></script>

<script src="../../../js/jquery.jqGrid.min.js"></script>

index.html

<!-- 用户信息 -->
<div class="page-content">
   <div class="page-content-area">
      <div class="row">
         <div class="col-xs-12">
            <div class="row center">
               <table id="grid" class="table"></table>
               <div id="grid-pager"></div>             
            </div>
         </div>
      </div>
   </div>
</div>

index.js

//用户信息列表
$grid = $grid.jqGrid({

"shrinkToFit" : true,
"gridstate" : "hidden",
"height" : "auto",
"rowNum": 10,
"rowList": [10, 20, 30],
"viewrecords": true,
"gridview": true,
"pager" : "#grid-pager",
"autowidth" : true,
"toolbar" : [true,'bottom'],
"jqModal" : false,
"datatype" : "json",
"mtype" : "POST",
"jsonReader" : {

    root:"data.list",
    page: "data.pageNum",
    total: "data.pages",
    records: "data.total",
    repeatitems : false
},

"url" : "xx.json",
        "postData" :{ //传参
            page : "1",
            rows : "10"
        },
		"colNames":["xx","xx","xx","xx","xx","xx","xx","xx","xx","xx","xx","xx","xx","xx"],  //列显示名称
		"colModel":[
		    {"name":"name","width":10,'sortable':false,"align":"center"},
		    {"name":"certificateNo","width":20,'sortable':false,"align":"center"},
		    {"name":"createTime","width":15,'sortable':false,"align":"center"},
		    {"name":"daybreak","width":10,'sortable':false,"align":"center",'formatter':bloodSugarformatter},
		    {"name":"beforeBreakfast","width":10,'sortable':false,"align":"center"},
		    {"name":"insBreakfast","width":10,'sortable':false,"align":"center",'formatter':insformatter},
			{"name":"afterBreakfast","width":10,'sortable':false,"align":"center"},
        	{"name":"beforeLunch","width":10,'sortable':false,"align":"center"},
		    {"name":"insLunch","width":10,'sortable':false,"align":"center"},
			{"name":"afterLunch","width":10,'sortable':false,"align":"center"},
			{"name":"beforeDinner","width":10,'sortable':false,"align":"center"},
		    {"name":"insDinner","width":10,'sortable':false,"align":"center"},
			{"name":"afterDinner","width":10,'sortable':false,"align":"center"},
			{"name":"bedtime","width":10,'sortable':false,"align":"center"}
        ],
	}).jqGrid('setGroupHeaders', {  //2行表头
	    useColSpanStyle: true,  //没有表头的列是否与表头所在行的空单元格合并
	    groupHeaders:[
	        {startColumnName:'name', numberOfColumns:2, titleText: 'xxx'},
	        {startColumnName:'beforeBreakfast', numberOfColumns: 3, titleText: 'xxxx'},
	        {startColumnName:'beforeLunch', numberOfColumns:3, titleText: 'xxxx'},
	        {startColumnName:'beforeDinner', numberOfColumns:3, titleText: '晚餐'} 
	    ] 
	}).jqGrid("navGrid","grid-pager",{ //分页
		edit: false,
		add: false,	
		del: false,
		search: false,
		refresh: false
	});