jqGrid是一个启用了ajax的js控件。为表格提供解决方案和数据,由于表格是一个通过ajax回调动态的加载数据,所以它可以与任何服务器集成技术一起使用,包括PHP、ASP、JAVA Servlet 、JSP、ColdFusion、perl。jqGrid是基于jquery技术写的脚本。——维基百科
下面是文档中的一个例子:
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',{name:'total',index:'total',{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来放在相应的位置。
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使用只有一个列可以做这项设置。如果设置多于一个,那么只选取第一个,其他被忽略。
1。jqGrid的事件如下,具体参见jqGrid中文文档
jQuery("#jsonmap").jqGrid({ url:'server.PHP?q=4',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是指唯一键值,如果没有就是值行号
总结:写到这里太累了,不想写了,还是上班偷偷写的。总结到这里吧。希望自己能深入学下去。加油。