jqgrid学习（二）
引入CSS：<link href="css/jquery-ui-1.10.3.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
引入JS：
<script src="js/jquery-1.11.1.min.js type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<script src="js/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
因为jqGrid3.6及以后的版本集成了jQuery UI，所以，此处需要导入UI相关js和css。另外grid.locale-cn.js这个语言文件必须在jquery.jqGrid.min.js之前加载，
否则会出问题。
2. html页面：
body里加上
<table id="list"></table> <div id="plist"></div> <!---用于分页-->
3. js调用：
<script type="text/javascript">
$(document).ready(function () {
jQuery("#list").jqGrid({
url: 'test.php', //服务器url
datatype: "json", //数据类型
postData:{},//发送参数
encoding:"UTF-8",
colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'], // //header，表头显示的name
colModel: [
{ name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true }, //name:列显示的名称, index:传到服务器用来排序的名称
//align:对齐方式， sortable:是否可以排序
{ name: 'Name', index: 'Name', width: 100, align: "center" },
{name: 'ReasonType', index: 'ReasonType', align: "center",
formatter: function (v, colInfo, rowInfo, doType) {
//v：当前的value值， colInfo:colModle的一些设置， rowInfo: 这一行的数据</span>
if (1 == rowInfo['status']){
return '启动';
}
else{
return '暂停';
}
}
},
{ name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }
],
rowNum: 10, //显示的记录条数</span>
rowList: [10, 20, 30],
altRows: true ,//斑马线式样
sortname: 'SalesReasonID', //拍序列的名称
viewrecords: true, //是否要显示总记录
sortorder: "desc", //排序方式
pager: 'plist', //翻页用的导航栏
pgtext: '第{0}页,共{1}页',
recordtext: '{0}-{1}条 共{2}条',
jsonReader: {
//描述json数据格式的数组
root: "dataRows",
total: "total", //总条数</span>
rows:"rows",//每页条数
page: "currpage", //当前页数
records: "totalrecords",//总条数
repeatitems: false
},
loadComplete:function(e){
}
})
});
</script>
4. json数据格式：
{
"total": 4,
"dataRows": [
{
"SalesReasonID": "gdecd",
"ReasonType": 0,
"Name": "通信卫士",
"ModifiedDate": "2016-04-12 12:00"
},
{
"SalesReasonID": "gcd",
"ReasonType": 0,
"Name": "蓝鑫API",
"ModifiedDate": "2016-04-12 12:00"
},
{
"SalesReasonID": "ddf",
"ReasonType": 1,
"Name": "1234567",
"ModifiedDate": "2016-04-12 12:00"
},
{
"accountsStatus": "ed",
"ReasonType": 0,
"Name": "123456",
"ModifiedDate": "2016-04-12 12:00"
},
{
"SalesReasonID": "as",
"ReasonType": 2,
"Name": "12345",
"ModifiedDate": "2016-04-12 12:00"
},
{
"SalesReasonID": "34",
"ReasonType": 1,
"Name": "1234",
"ModifiedDate": "2016-04-12 12:00"
},
{
"SalesReasonID": "12",
"ReasonType": 0,
"Name": "科大讯飞",
"ModifiedDate": "2016-04-12 12:00"
}
],
"s": 1,
"page": 1,
"records": 39,
"rows": 10
}