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是指唯一键值，如果没有就是值行号

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