Jqgrid的用法总结与分页功能的拓展

　　这是本人写的第一个与技术相关的博客，但是非挑战技术的，而是对工作的总结，另外加一点点拓展。

　　Jqgrid的功能十分强大，强大到可以做到与数据grid相关的任何功能，同时由于在用的过程中总是不能够一气呵成，所以想在此总结一下Jqgrid的用法，为以后省去不必要的麻烦。

　　Jqgrid的demo也十分的强大，种类繁多，用起来也是十分方便。 http://www.trirand.com/blog/jqgrid/jqgrid.html。

　　Jqgrid的参数说明： 在挽星的博客里介绍的十分详细，非常感谢。 http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.html。

　　一、 jqgrid 的准备工作

　　　　1.jqgrid是基于jquery和jquery的ui来开发的，所以我们要去jquery的官方网站上去下载jquery及ui库;

　　　　2.jqgrid的官方网站上下载jqgrid相关的库;

　　　　3.所有需要的js库文件，以及css文件如下　　　

　　　　　　<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
　　　　　　<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
　　　　　　<script type="text/javascript" src="jquery.1.8.3.js"></script>
　　　　　　<script type="text/javascript" src="jquery.jqGrid.min.js"></script>
　　　　　　<script type="text/javascript" src="i18n/grid.locale-cn.js"></script> （这里是为了资源国际化，可以显示中文）

　　　　另外，jqueryui包里边的images文件夹要放在与对应的css文件放在同一目录下。

　　二、 使用本地数据（未搭建项目的时候,直接使用或是调试）

　　　　1）js代码如下：

　　　　var mydata = [
　　　　　　{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
　　　　　　{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
　　　　　　{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
　　　　　　{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
　　　　　　{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
　　　　　　{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
　　　　　　{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
　　　　　　{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
　　　　　　{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
　　　　];
　　　　var jqgrid_width = 1000;
　　　　jQuery("#list").jqGrid({
　　　　　　datatype: "local",       //设置使用本地数据（必须）
　　　　　　height: 350,　　　　  //表格的高度
　　　　　　width: jqgrid_width,  //表格的宽度
　　　　　　colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],   //表格中显示的列标题
　　　　　　colModel:[
　　　　　　　　{name:'id',index:'id', width:100, height:50, align:"left",sorttype:"int"},  // 这里的name和index保持一致， 与json数据中的key值保持一致
　　　　　　　　{name:'invdate',index:'invdate', width:100, align:"left",sorttype:"date"},
　　　　　　　　{name:'name',index:'name', width:150,align:"left"},
　　　　　　　　{name:'amount',index:'amount', width:150, align:"left",sorttype:"float"},
　　　　　　　　{name:'tax',index:'tax', width:150, align:"left",sorttype:"float"},
　　　　　　　　{name:'total',index:'total', width:150,align:"left",sorttype:"float"},
　　　　　　　　{name:'note',index:'note', width:200, align:"left", sortable:false}
　　　　　　],

　　　　　　rowNum:10,
　　　　　　rowList:[10,20,30],
　　　　　　pager: '#pager',

　　　　　　multiselect: true
　　　　}).jqGrid('navGrid','#pager',{edit:false,add:false,del:false});

　　　　for(var i=0;i<=mydata.length;i++)
　　　　jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);

　　　　2）html代码如下:　　　

　　　　　　<table id="list">
　　　　　　</table>
　　　　　　<div id="pager">
　　　　　　</div>

　　　  3) 冻结列功能，由于在很多api中并没有介绍，所以在此加上此功能的用法

　　　　　　1.在grid的配置中配置 shrinkToFit:false

　　　　　　2.在colModel中配置 frozen:true

　　　　　　3.grid 执行方法 $grid.jqGrid("setFrozenColumns");

　　三、 使用远程数据（涉及后端分页，前端分页）

　　　　创建一个json格式的文件 data.json.

　　　　内容如下：　　

{
　　"page":"1",
　　"total":2,
　　"records":"13",
　　"rows":[
　　　　{"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]},
　　　　{"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]},
　　　　{"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]},
　　　　{"id":"10","cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]},
　　　　{"id":"9","cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]},
　　　　{"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]},
　　　　{"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]},
　　　　{"id":"6","cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]},
　　　　{"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]},
　　　　{"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]}
　　],
　　"userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}
}

　　　　//这里要强调一点是： 后台返回的数据格式必须和上边的一样page代表当前页数，total代表总页数，records代表记录总条数。 userdata是用户自定义的返回数据，可以不包含。

　　　　//js代码如下（需后台分页,并将所需参数传递过来）：

　　　　var jqgrid_width = 1000;
　　　　jQuery("#list").jqGrid({
　　　　　　url: "data.json",        //设置使用远程数据url（必须）

　　　　　　datatype:"json"        //设置接收的数据格式
　　　　　　height: 350,　　　　  //表格的高度
　　　　　　width: jqgrid_width,  //表格的宽度
　　　　　　colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
　　　　　　colModel:[
　　　　　　　　{name:'id',index:'id', width:100, height:50, align:"left",sorttype:"int"},
　　　　　　　　{name:'invdate',index:'invdate', width:100, align:"left",sorttype:"date"},
　　　　　　　　{name:'name',index:'name', width:150,align:"left"},
　　　　　　　　{name:'amount',index:'amount', width:150, align:"left",sorttype:"float"},
　　　　　　　　{name:'tax',index:'tax', width:150, align:"left",sorttype:"float"},
　　　　　　　　{name:'total',index:'total', width:150,align:"left",sorttype:"float"},
　　　　　　　　{name:'note',index:'note', width:200, align:"left", sortable:false}
　　　　　　],

　　　　　　jsonReader : {
　　　　　　　　repeatitems : false,
　　　　　　　　page:'page',
　　　　　　　　total:'total',
　　　　　　　　root:'rows'
　　　　　　},

　　　　　　rowNum:10,
　　　　　　rowList:[10,20,30],
　　　　　　pager: '#pager',

　　　　　　multiselect: true
　　　　}).jqGrid('navGrid','#pager',{edit:false,add:false,del:false});

　　　　//html代码同上。

　　　　

　　　　另外会有一个问题， 如果数据简单不想后台去分页，可以一次性将数据返回，利用前端分页也是十分方便的。

　　　　后台返回一次数据（包含所有的数据，但是数据格式必须同上）

　　　　//js代码如下（前端分页）：

　　　　var jqgrid_width = 1000;
　　　　jQuery("#list").jqGrid({
　　　　　　url: "data.json",        //设置使用远程数据url（必须）

　　　　　　loadonce: true,         //设置只加载一次数据

　　　　　　datatype:"json"        //设置接收的数据格式
　　　　　　height: 350,　　　　  //表格的高度
　　　　　　width: jqgrid_width,  //表格的宽度
　　　　　　colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
　　　　　　colModel:[
　　　　　　　　{name:'id',index:'id', width:100, height:50, align:"left",sorttype:"int"},
　　　　　　　　{name:'invdate',index:'invdate', width:100, align:"left",sorttype:"date"},
　　　　　　　　{name:'name',index:'name', width:150,align:"left"},
　　　　　　　　{name:'amount',index:'amount', width:150, align:"left",sorttype:"float"},
　　　　　　　　{name:'tax',index:'tax', width:150, align:"left",sorttype:"float"},
　　　　　　　　{name:'total',index:'total', width:150,align:"left",sorttype:"float"},
　　　　　　　　{name:'note',index:'note', width:200, align:"left", sortable:false}
　　　　　　],

　　　　　　rowNum:10,
　　　　　　rowList:[10,20,30],
　　　　　　pager: '#pager',

　　　　　　multiselect: true
　　　　}).jqGrid('navGrid','#pager',{edit:false,add:false,del:false});

　　　　//html代码同上

　　　　至此，jqgrid 的基本用法已经算是介绍完了。其功能的强大之处，请仔细阅读挽星关于jqgrid的参数介绍。

　　四、 jqgrid 分页插件拓展

　　　　jqgrid分页功能虽然强大，但是分页的样式却不能适用于我们工作中的很多种情况，所以，想借此拓展一下jqgrid的分页功能

　　var jqgrid_width = 1000;
　　jQuery("#list").jqGrid({
　　　　　　url: "data.json",        //设置使用远程数据url（必须）

　　　　　　loadonce: true,         //设置只加载一次数据

　　　　　　datatype:"json"        //设置接收的数据格式
　　　　　　height: 350,　　　　  //表格的高度
　　　　　　width: jqgrid_width,  //表格的宽度

　　　　　　scrollOffset: 0,           //这是jqgrid用来显示右侧滚动条专门为其留的位置，设置为0即可隐藏
　　　　　　colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
　　　　　　colModel:[
　　　　　　　　{name:'id',index:'id', width:100, height:50, align:"left",sorttype:"int"},
　　　　　　　　{name:'invdate',index:'invdate', width:100, align:"left",sorttype:"date"},
　　　　　　　　{name:'name',index:'name', width:150,align:"left"},
　　　　　　　　{name:'amount',index:'amount', width:150, align:"left",sorttype:"float"},
　　　　　　　　{name:'tax',index:'tax', width:150, align:"left",sorttype:"float"},
　　　　　　　　{name:'total',index:'total', width:150,align:"left",sorttype:"float"},
　　　　　　　　{name:'note',index:'note', width:200, align:"left", sortable:false}
　　　　　　],

jsonReader : {
repeatitems : false,
page:'page',
total:'total',
root:'rows'
}

　　　　});

　　　

　　自定义它的分页功能需要实现几个方法即可，即当你点击自定的分页按钮是，按照下边的参数方式重新加载jqgrid即可实现翻页

jQuery("#datalist").setGridParam({
　　postData: {},   //这里传递自定义的参数
　　page: 2           //这里传递想要跳转的页数，即可实现翻页（上一页，下一页，首页，尾页，跳转等等）
}).trigger("reloadGrid");

写到这里突然发现介绍的还是比较简单的，所以以后会继续补充。