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
用来操作数据或者操作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等。
这些方法的具体用法，或浅显易懂，或不是非常常用。
