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',{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来放在相应的位置。

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

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

原文链接：https://www.f2er.com/ajax/162598.html

猜你在找的Ajax相关文章