jqGrid的常用属性和方法

JQgrid插件：

jquery grid是富客户端的，基于XML ， Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案，代表和编辑表格数据在网络上。精心设计的，具有强大的脚本API的，这可编辑网格是很简单的DHTML与XML 的配置，并显示出令人信服的成果与大量数据。现在我现在熟悉一下jquery grid的的使用方法和一些常用的option设置。

一、jqGrid特性：

• 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。
• 兼容目前所有流行的web浏览器。
• Ajax分页，可以控制每页显示的记录数。
• 支持XML，JSON，数组形式的数据源。
• 提供丰富的选项配置及方法事件接口。
• 支持表格排序，支持拖动列、隐藏列。
• 支持滚动加载数据。
• 支持实时编辑保存数据内容。
• 支持子表格及树形表格。
• 支持多语言。
• 最关键目前是免费的。

二、jqGrid的属性设置：

代码：

$(document).ready(function(){
       $(“#id_name”).jqGrid({
        //key:value,形式配置属性类似于Ajax
        url: "jqGrid01.action"，//地址值，数据来源的地址值，可以是个xml文件也可以是Json
        datatype: "json" ,//  数据类型xml，json。
        mtype: "POST" ,//请求方式“POST”或者“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降序
         altRows: true,         // 设置为交替行表格，默认为false      
         rownumber:true,       //序号列是否显示（不显示名称QWQ）     
         rownumWidth:50,       //序号列宽度
         viewrecords: true,    //是否在浏览器导航栏显示记录总数      
         gridview:true,            //构造一行数据后添加到grid中     
         loadComplete:function(){                  
           var  t=this;               
           setTimeout(function(){         
            updatePageIcons(t);            
             },0);            
            }   
       });
});

三、jqGrid的常用方法：

1.调用grid

jqGrid已经可以从Server端获得数据，并显示在Grid表格中了。下面说一下，如何操作Grid表格及其数据。jqGrid有很多方法函数， 用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式：

$("#grid_id").jqGridMethod(parameter1,.....,parameterN);

或者

$("#grid_id").jqGrid(function(){},paramter1,.....parameterN);

1. getGridParam

代码：

var id = $("#id_name").jqGrid("getGridParam","selrow");

代码表示：获取的是选中的行的id值，selrow是jqGrid选项之一，默认值是null。

2. getRowData

代码：

var selectedId = $("# id_name ").jqGrid("getGridParam", "selrow");  

var rowdate = $("#id_name").jqGrid("getRowData",selectId);

代码表示：获取某行的数据，返回的是一个name：value的数组

3. addRowData

这个方法用于向Grid中插入新的一行。执行成功返回true，否则返回false。它具有4个参数：

rowid ：新行的id号；

data ：新行的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；

position ：插入的位置（ first：表格顶端；last：表格底端；before：srcrowid之前；after：srcrowid之后 ）；

srcrowid ：新行将插入到srcrowid指定行的前面或后面。

代码：

$("#id_name").jqGrid("addRowData"，rowid，data，"before"，selectId);

4. setRowData

这个方法用于 为某行数据设置数据值 。执行成功返回true，否则返回false。它具有3个参数：

rowid ：更新数据的行id；

data ：更新的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的 列名称name ；这个数据对象，不必设置完全，需要更新哪列，就设置哪列的 name:value对 ；

cssprop ：如果cssprop为String类型，则会使用jQuery的addClass为行增加相应名称的 css类；如果为object类型，则会使用html的css属性，为行添加样式。如果只想增加css样式而不更新数据，可以将data参数设为false。

代码：

$("#id_name").jqGrid("setRowData"，rowid，data，cssprop);

5. delRowData

代码：

$("#id_name").jqGrid("delRowData"，rowid);

代码表示：删除某行数据

6. setGridParam

这个方法与getGridParam对应，用于设置jqGrid的options选项。

返回jqGrid对象。参数为{name1:value1,name2: value2…}形式的对象（name来自jqGrid的options选项名）。某些选项在设置之后需要trigger("reloadGrid")，才能显示出效果。

7. setGridWidth

为Grid动态地设定一个新的宽度。两个参数：

new_width ：以px为单位的新宽度值；

shrink ：作用与jqGrid的shrinkToFit选项相同；如果此参数未设置，则沿用jqGrid的shrinkToFit选项的值。

8. trigger("reloadGrid")

根据当前设置， 重新载入Grid表格 ，即意味着向 Server发送一个新的请求 。此方法只能用于已经构建好的Grid。此外，此方法 不会使对colModel所做出的改变生效 。应该使用gridUnload来重新载入对colModel的新设置。

9. 其他方法

除了以上介绍的的方法外，jqGrid还有其他有用的方法，例如：

addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等

以及增强模块提供的方法，例如：

filterGrid、GridDestroy、GridUnload、setColProp等。

这些方法的具体用法，或浅显易懂，或不是非常常用。

参考官方文档（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods ）