JqGrid知识总结

            jqGrid是一个启用了ajax的js控件。为表格提供解决方案和数据，由于表格是一个通过ajax回调动态的加载数据，所以它可以与任何服务器集成技术一起使用，包括PHP、ASP、JAVA Servlet 、JSP、ColdFusion、perl。jqGrid是基于jquery技术写的脚本。——维基百科

jqGrid中文文档

jqGrid英文文档

下面是文档中的一个例子：

jQuery("#jsonmap").jqGrid({        
   	url:'server.php?q=4',
	datatype: "json",
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'invdate',index:'invdate', width:90, jsonmap:"invdate"},
   		{name:'name',index:'name asc, invdate', width:100},
   		{name:'amount',index:'amount', width:80, align:"right"},
   		{name:'tax',index:'tax', width:80, align:"right"},		
   		{name:'total',index:'total', width:80,align:"right"},		
   		{name:'note',index:'note', width:150, sortable:false}		
   	],
   	rowNum:10,
   	rowList:[10,20,30],
   	pager: '#pjmap',
   	sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
	jsonReader: {
		repeatitems : false,
		id: "0"
	},
	caption: "JSON Mapping",
	height: '100%'
});

一、初始化参数（常见的）：

1.url:得到数据的后台地址，后台方法的书写根据不同的服务器语言不同书写方法不同，

ASP.NET:

public JsonResult List(string sidx, string sord, int page, int rows, string searchText, string filters)
{
}

其中sidx：排序列、sord：排序的方式（升序、降序）、page：页数、rows:显示几行、searchText：搜索的文本、filters：过滤文本。这些参数名是固定不变的，顺序可以改变。也可以多加几个其他的参数。返回值是Json格式的数据，jqGrid会根据这个数据以及相应的index与name来放在相应的位置。

PHP：文档中就是PHP的例子。

2．datatype: 从服务端返回的数据类型：默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside 。当使用local时：需要手动的添加数据。

3.colModel:表格中列的集合，Array类型。name： 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序。

4.sortname: 默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台，在排序的时候可以选择使用那一列进行排序。有一个参数：multiSort设为true时，可以多级排序 具体使用方法见文档：jqGrid中文文档

二、colModel 参数

         1.edittype: text, textarea, select, checkbox,password, button, image and file.其中在你未选中时，呈现的状态仅仅是文本。如果想对其中的格式做任何改变，就要用到这个参数：formatter。例：

{name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){
var temp = “<img src=’/jqGrid/jquery-ui-1.7.2.custom/css/img/”
if(cellvalue==1){
temp = temp +”user-white.png”;
} else if(cellvalue==2){
temp = temp +”user-white-female.png”;
} else {
temp = temp + “user-silhouette.png”;
}
temp = temp + “‘ border=’0 ′ />”
return temp;
}},// 返回性别的图标。

         2.align:对齐属性，有left、center、right。例：align:”center”。注意双引号。

         3.edittable：是否可编辑，每一行有两个状态：编辑状态、未编辑状态。在从一种状态转换到另一种状态时，表格会重新从数据包加载数据。

         4.key：当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略。

三、jqGrid中事件、方法的用法。

         1。jqGrid的事件如下，具体参见jqGrid中文文档

jQuery("#jsonmap").jqGrid({        
   	url:'server.php?q=4',
	datatype: "json",
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'invdate',index:'invdate', width:90, jsonmap:"invdate"},
   		{name:'name',index:'name asc, invdate', width:100},
   		{name:'amount',index:'amount', width:80, align:"right"},
   		{name:'tax',index:'tax', width:80, align:"right"},		
   		{name:'total',index:'total', width:80,align:"right"},		
   		{name:'note',index:'note', width:150, sortable:false}		
   	],
   	onSelectRow:function(rowid,status){},//当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用,如果控件中在单元格呢，而且这个单元格是可编辑的，这个控件的一些事件的实现必须在这里
	loadComplete:function(xhr){},//当从服务器返回响应时执行，xhr：XMLHttpRequest 对象
	gridComplete:function(){}.//当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件,如果控件中在单元格呢，而且这个单元格是不可编辑的，这个控件的一些事件的实现写在这里就好

});

        2.方法：

jQuery("#List").jqGrid('delGridRow', id, { height: 180, reloadAfterSubmit: true, url: "/Test/Delete" });//删除指定行，id为行号
jQuery("#List").jqGrid('getRowData');//得到表格所有的数据对象数组
jQuery("#List").jqGrid('getRowData',id);//得到表格指定行的数据对象
jQuery('#List').jqGrid('restoreRow', id);//重新从数据包中加载指定行的数据，这个id是指唯一键值，如果没有就是值行号

总结：写到这里太累了，不想写了，还是上班偷偷写的。总结到这里吧。希望自己能深入学下去。加油。