jqGrid参数

一 下载库

官网：http://guriddo.net/

源码：https://github.com/tonytomov/jqGrid

下载地址： http://guriddo.net/?page_id=103292
引入：
<link href="../css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />   
<link href="../css/ui.jqgrid.css" rel="stylesheet" type="text/css" />   
<link href="../css/ui.multiselect.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="../js/jquery-1.6.min.js"></script> 
<script type="text/javascript" src="../js/i18n/grid.locale-cn.js"></script> 
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>

二 安装

jgGrid需要一个jQueryUI的主题，可以从官网下载

安装教程

三 jqGrid属性

url  string  获取数据的地址
datatype string  从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
mtype  string  ajax提交方式。POST或者GET，默认GET
multiselect boolean  定义是否可以多选
colNames Array  列显示名称，是一个数组对象
colModel Array  常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序
pager  string  定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
rowNum  integer  在grid上显示记录条数，这个参数是要被传递到后台
rowList  Array  一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
sortname string  默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台
viewrecords boolean  定义是否要显示总记录数
cellEdit boolean  启用或者禁用单元格编辑功能
datastr  boolean  xmlstring或者jsonstring
height  number  表格高度，可以是数字，像素值或者百分比
width  number  如果设置则按此设置为主，如果没有设置则按colModel中定义的宽度计算
jsonReader Array  描述json 数据格式的数组
page  integer  设置初始的页码
pgbuttons boolean  是否显示翻页按钮
pginput  boolean  是否显示跳转页面的输入框  
pgtext  boolean  当前页信息
scroll  boolean  创建一个动态滚动的表格，当为true时，翻页栏被禁用，使用垂直滚动条加载数据，且在首次访问服务器端时将加载所有数据到客户端。当此参数为数字时，表格只控制可见的几行，所有数据都在这几行中加载
shrinkToFit boolean  此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度
sortable boolean  是否可以排序
sortname string  排序列的名称，此参数会被传到后台
sortorder string  排序顺序，升序或者降序（asc or desc）
sopt  Array  比较运算符,可任意组合('eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc')
toolbar  Array  表格的工具栏。数组中有两个值，第一个为是否启用，第二个指定工具栏位置（相对于body layer），如：[true,”both”] 。工具栏位置可选值：“top”,”bottom”, “both”. 如果工具栏在上面，则工具栏id为“t_”+表格id；如果在下面则为 “tb_”+表格id；如果只有一个工具栏则为 “t_”+表格id
navGrid  Array  功能按钮(增删改查,搜,刷新)设置

四 jqGrid-ColModel属性

align  string  left,center,right
classes  string  设置列的css。多个class之间用空格分隔，如：'class1 class2' 。表格默认的css属性是ui-ellipsis
datefmt  string  ”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日.
editable boolean  单元格是否可编辑
fixed  boolean  列宽度是否要固定不可变
hidden  boolean  在初始化表格时是否要隐藏此列
search  boolean  在搜索模式下，定义此列是否可以作为搜索列
searchoptions Array  设置搜索参数
sortable boolean  是否可排序
width  number  默认列的宽度，只能是象素值，不能是百分比

 

五 jqGrid数据-Json

需要定义jsonReader来跟服务器端返回的数据做对应，其默认值：

jsonReader : { 
      root: "rows", 
      page: "page",//当前页
      total: "total",//总页数
      records: "records",  //查询出的记录数
      repeatitems: true, 
      cell: "cell",//当前行的所有单元格
      id: "id",//行id
      userdata: "userdata", 
      subgrid: {root:"rows",  
         repeatitems: true,  
        cell:"cell" 
} 

这样服务器端返回的数据格式：
{  
   total: "xxx",  
   page: "yyy",  
   records: "zzz", 
   rows ://包含实际数据的数组
   [ 
     {id:"1", cell:["cell11", "cell12", "cell13"]},
     {id:"2", cell:["cell21", "cell22", "cell23"]}, 
       ... 
   ]
}

六 jqGrid-事件

afterInsertRow  rowidrowdatarowelem  当插入每行时触发。rowid插入当前行的id；rowdata插入行的数据，格式为name: value，name为colModel中的名字
beforeRequest  none    向服务器端发起请求之前触发此事件但如果datatype是一个function时例外
beforeSelectRow  rowid, e   当用户点击当前行在未选择此行时触发。rowid：此行id；e：事件对象。返回值为ture或者false。如果返回true则选择完成，如果返回false则不会选择此行也不会触发其他事件
gridComplete  none    当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件
loadComplete  xhr    当从服务器返回响应时执行，xhr：XMLHttpRequest 对象
loadError  xhr,status,error  如果请求服务器失败则调用此方法。xhr：XMLHttpRequest 对象；satus：错误类型，字符串类型；error：exception对象
onCellSelect  rowid,iCol,cellcontent,e 当点击单元格时触发。rowid：当前行id；iCol：当前单元格索引；cellContent：当前单元格内容；e：event对象
ondblClickRow  rowid,iRow,iCol,e  双击行时触发。rowid：当前行id；iRow：当前行索引位置；iCol：当前单元格位置索引；e:event对象
onHeaderClick  gridstate   当点击显示/隐藏表格的那个按钮时触发；gridstate：表格状态，可选值：visible or hidden
onPaging  pgButton   点击翻页按钮填充数据之前触发此事件，同样当输入页码跳转页面时也会触发此事件
onRightClickRow  rowid,iRow,iCol,e  在行上右击鼠标时触发此事件。rowid：当前行id；iRow：当前行位置索引；iCol：当前单元格位置索引；e：event对象 
onSelectAll  aRowids,status   multiselect为ture，且点击头部的checkbox时才会触发此事件。aRowids：所有选中行的id集合，为一个数组。 status：boolean变量说明checkbox的选择状态，true选中false不选中。无论checkbox是否选择，aRowids始终有 值
onSelectRow  rowid,status    当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用
onSortCol  index,iCol,sortorder  当点击排序列但是数据还未进行变化时触发此事件。index：name在colModel中位置索引；iCol：当前单元格位置索引；sortorder：排序状态：desc或者asc 
resizeStart  event, index   当开始改变一个列宽度时触发此事件。event：event对象；index：当前列在colModel中位置索引
resizeStop  newwidth, index   当列宽度改变之后触发此事件。newwidth：列改变后的宽度；index：当前列在colModel中的位置索引 
serializeGridData postData   向服务器发起请求时会把数据进行序列化，用户自定义数据也可以被提交到服务器端
 
示例：
jQuery("#gridid")。jqGrid({
    onSelectRow:function(id){
        //事件处理代码
    }
});