jqGrid 属性、事件全集

以下是jqGrid 最常用的属性和事件，经过一段时间的整理，终于弄的差不多了。版权所有，转载请注明出处，向您的厚道致敬！谢谢！

<script type="text/javascript">
	var lastsel;
	jQuery().ready(function () { 
		//父Grid（主Grid）
		jQuery("#list1").jqGrid({ 
			url:'server.php?q=1', 
			editurl:"server.php",
			datatype: "json", //数据类型 datatype: "local", datatype: "xml",
			colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
			colModel:[ 
				{name:'act',index:'act', width:75,sortable:false},
				{name:'id',index:'id', width:75}, 
				{name:'invdate',index:'invdate', width:90}, 
				{name:'name',index:'name', 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: jQuery('#pager1'), //Grid显示在id为pager1的div里面
			sortname: 'id', //根据ID排序
			viewrecords: true, //显示数据总记录数
			sortorder: "desc", //倒序
			hidegrid: false, //Grid是否隐藏
			autowidth: true, //自动列宽
			width: 500, //Grid 宽度
			height: 200, //行高 height: "100%",
			multiselect: true, //复选框
			recordpos: 'left', //总记录显示位置：居左
			mtype: "POST",
			pgbuttons: false, 
			pgtext: false, 
			pginput: false,
			multikey: "ctrlKey",
			onSortCol: function(name,index){ 
				//点击排序列，根据哪列排序
				alert("Column Name: "+name+" Column Index: "+index);
			}, 
			ondblClickRow: function(id){ 
				//双击行
				alert("You double click row with id: "+id);
			}, 
			onSelectRow: function(ids) { //单击选择行
				if(ids == null) { 
					ids=0; 
					if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) { 
						jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
						jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid'); 
					} 
				} else { 
					jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1}); 
					jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid'); 
				} 
				//点击Grid，将行变为编辑状态
				if(id && id!==lastsel){
					jQuery('#rowed3').jqGrid('restoreRow',lastsel);
					jQuery('#rowed3').jqGrid('editRow',id,true); lastsel=id;
				}
			},
			gridComplete: function(){
				//在Grid的第一列（Actions）中添加按钮E、S、C，添加增、删、查、改按钮；
				var ids = jQuery("#list1").jqGrid('getDataIDs');
				for(var i=0;i < ids.length;i++){
					var cl = ids[i];
					be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list1').editRow('"+cl+"');\" />";
					se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list1').saveRow('"+cl+"');\" />";
					ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list1').restoreRow('"+cl+"');\" />";
					jQuery("#list1").jqGrid('setRowData',ids[i],{act:be+se+ce});
				}
			},
			subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid
			subGridUrl: 'subgrid.php?q=2', //内部Grid URL
			subGridModel: [ { //内部Grid列
				name : ['No','Item','Qty','Unit','Line Total'], 
				width : [55,200,80,80,80],
				params: ['invdate']	//嵌套Grid参数			
			} ],
			subGridRowExpanded: function(subgrid_id, row_id) { //Grid内部嵌套Grid
				// we pass two parameters 
				// subgrid_id is a id of the div tag created whitin a table data 
				// the id of this elemenet is a combination of the "sg_" + id of the row 
				// the row_id is the id of the row // If we wan to pass additinal parameters to the url we can use 
				// a method getRowData(row_id) - which returns associative array in type name-value 
				// here we can easy construct the flowing 
				var subgrid_table_id, pager_id; 
				subgrid_table_id = subgrid_id+"_t"; 
				pager_id = "p_"+subgrid_table_id; 
				$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
				jQuery("#"+subgrid_table_id).jqGrid({ 
					url:"subgrid.php?q=2&id="+row_id, 
					datatype: "xml", 
					colNames: ['No','Item','Qty','Unit','Line Total'], 
					colModel: [ 
						{name:"num",index:"num",width:80,key:true}, 
						{name:"item",index:"item",width:130}, 
						{name:"qty",index:"qty",width:70,align:"right"}, 
						{name:"unit",index:"unit",width:70,align:"right"}, 
						{name:"total",index:"total",width:70,align:"right",sortable:false} 
					], 
					rowNum:20, 
					pager: pager_id, 
					sortname: 'num', 
					sortorder: "asc", 
					height: '100%' //自动适应行高
				}); 
				jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false}); 
			}, 
			subGridRowColapsed: function(subgrid_id, row_id) { 
				// this function is called before removing the data 
				//var subgrid_table_id; 
				//subgrid_table_id = subgrid_id+"_t"; 
				//jQuery("#"+subgrid_table_id).remove(); 
			},
			loadComplete: function(){ //加载完成（初始加载），回调函数
				var ret; 
				alert("This function is executed immediately after\n data is loaded. We try to update data in row 13."); 
				ret = jQuery("#list15").jqGrid('getRowData',"13"); 
				if(ret.id == "13"){ 
					jQuery("#list15").jqGrid('setRowData',ret.id,{note:"<font color='red'>Row 13 is updated!</font>"}) 
				} 
			},
			caption:"Grid Example" //Grid名称
		}, {singleselect: true, lazyload: true}).navGrid('#pager1',{edit:false,add:false,del:false}); 
            //singleselect: true 设置jqGrid复选框为单选
           //lazyload: true 设置jqGrid不自动加载
		//jQuery("#list6").jqGrid('navGrid',"#pager6",{edit:false,add:false,del:false}); = .navGrid('#pager1',{edit:false,add:false,del:false}); 
		//添加查询文本框
		jQuery("#list7").jqGrid('navGrid','#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});
		//查询和刷新按钮居右
		jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'}); 
		//编辑行，添加Add、Edit、Save、Cancel按钮 //<script src="rowedex3.js" type="text/javascript"> </script>
		jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3");	//<table id="rowed3"></table> <div id="prowed3"></div>
		
		//子Grid
		jQuery("#list10_d").jqGrid({ 
			height: 100, 
			url:'subgrid.php?q=1&id=0', 
			datatype: "json", 
			colNames:[
				'No','Item', 'Qty', 'Unit','Line Total'
			], 
			colModel:[ 
				{name:'num',index:'num', width:55}, 
				{name:'item',index:'item', width:180}, 
				{name:'qty',index:'qty', width:80, align:"right"}, 
				{name:'unit',index:'unit', width:80, align:"right"}, 
				{name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false} 
			], 
			rowNum:5, 
			rowList:[5,10,20], 
			pager: '#pager10_d', 
			sortname: 'item', 
			viewrecords: true, 
			sortorder: "asc", 
			multiselect: true, 
			caption:"Invoice Detail" 
		}).navGrid('#pager10_d',{add:false,edit:false,del:false});
		
		jQuery("#a1").click( function(){ 
			//获取Grid中选中的行id
			var id = jQuery("#list5").jqGrid('getGridParam','selrow'); 
			if (id) { 
				var ret = jQuery("#list5").jqGrid('getRowData',id); 
				alert("id="+ret.id+" invdate="+ret.invdate+"..."); 
			} else { 
				alert("Please select row");
			} 
		}); 
		jQuery("#a2").click( function(){ 
			//删除第12行
			var su=jQuery("#list5").jqGrid('delRowData',12); 
			if(su) 
				alert("Succes. Write custom code to delete row from server"); 
			else 
				alert("Allready deleted or not in list"); 
		}); 
		jQuery("#a3").click( function(){ 
			//修改第11行
			var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"}); 
			if(su) 
				alert("Succes. Write custom code to update row in server"); 
			else 
				alert("Can not update"); 
		}); 
		jQuery("#a4").click( function(){ 
			//添加第99行（id为99的）
			var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}; 
			var su=jQuery("#list5").jqGrid('addRowData',99,datarow); 
			if(su) 
				alert("Succes. Write custom code to add data in server"); 
			else 
				alert("Can not update"); 
		});
		
		jQuery("#s1").click( function() { 
			//设置URL
			jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");
		}); 
		jQuery("#s2").click( function() { 
			//设置排序列
			jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid"); 
		}); 
		jQuery("#s3").click( function() { 
			//设置升序或倒序
			var so = jQuery("#list7").jqGrid('getGridParam','sortorder'); 
			so = so=="asc"?"desc":"asc"; 
			jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid"); 
		}); 
		jQuery("#s4").click( function() { 
			//跳转到第二页
			jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid"); 
		}); 
		jQuery("#s5").click( function() { 
			//设置每页显示15行
			jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid"); 
		}); 
		jQuery("#s6").click( function() { 
			//设置URL和数据格式
			jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid"); 
		}); 
		jQuery("#s7").click( function() { 
			//设置Grid的名称
			jQuery("#list7").jqGrid('setCaption',"New Caption"); 
		}); 
		jQuery("#s8").click( function() { 
			//设置Grid排序字段，根据名称排序
			jQuery("#list7").jqGrid('sortGrid',"name",false); 
		});
		jQuery("#m1").click( function() { 
			//获取复选框被选中的id
			var s = jQuery("#list9").jqGrid('getGridParam','selarrrow'); 
			alert(s); 
		}); 
		jQuery("#m1s").click( function() { 
			//设置选中第13行
			jQuery("#list9").jqGrid('setSelection',"13"); 
		});
		jQuery("#ms1").click( function() { 
			var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow'); 
			alert(s); 
		});
		
		//Grid 查询
		var timeoutHnd; 
		var flAuto = false; 
		function doSearch(ev){ 
			if(!flAuto) 
				return; 
			// var elem = ev.target||ev.srcElement; 
			if(timeoutHnd) 
				clearTimeout(timeoutHnd) 
			timeoutHnd = setTimeout(gridReload,500) 
		} 
		function gridReload(){ 
			var nm_mask = jQuery("#item_nm").val(); 
			var cd_mask = jQuery("#search_cd").val(); 
			jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid"); 
		} 
		function enableAutosubmit(state){ 
			flAuto = state; 
			jQuery("#submitButton").attr("disabled",state); 
		}
		
		jQuery("#cm1").click( function() { 
			//显示选中行
			var s; 
			s = jQuery("#list13").jqGrid('getGridParam','selarrrow'); 
			alert(s); 
		}); 
		jQuery("#cm1s").click( function() { 
			//选中编号为13的行
			jQuery("#list13").jqGrid('setSelection',"13"); 
		}); 
		jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false}, 
			{}, // edit parameters 
			{}, // add parameters 
			{reloadAfterSubmit:false} //delete parameters 
		);
		
		jQuery("#sids").click( function() { 
			//获取Grid中当页的所有ID
			alert("Id's of Grid: \n"+jQuery("#list15").jqGrid('getDataIDs')); 
		});
		
		jQuery("#hc").click( function() { 
			//隐藏tax列
			jQuery("#list17").jqGrid('navGrid','hideCol',"tax"); 
		}); 
		jQuery("#sc").click( function() { 
			//显示tax列
			jQuery("#list17").jqGrid('navGrid','showCol',"tax"); 
		});
		jQuery("#ed1").click( function() {
			//编辑第13行
			jQuery("#rowed1").jqGrid('editRow',"13");
			this.disabled = 'true';
			jQuery("#sved1,#cned1").attr("disabled",false); 
		});
		jQuery("#sved1").click( function() {
			//保存第13行
			jQuery("#rowed1").jqGrid('saveRow',"13");
			jQuery("#sved1,#cned1").attr("disabled",true);
			jQuery("#ed1").attr("disabled",false); 
		});
		jQuery("#cned1").click( function() {
			//取消编辑第13行
			jQuery("#rowed1").jqGrid('restoreRow',"13");
			jQuery("#sved1,#cned1").attr("disabled",true);
			jQuery("#ed1").attr("disabled",false);
		});
	})
</script>

//本地数组数据：datatype: "local",
var mydata = [ 
		{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} 
	]; 
for(var i=0;i<=mydata.length;i++) 
	jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);

<html>
 ...
 <table id="list1"></table>
 <div id="pager1"></div>
 ... 
 <table id="list5"></table> 
 <div id="pager5"></div> <br /> 
 <a href="#" id="a1">Get data from selected row</a> 
 <br /> 
 <a href="#" id="a2">Delete row 2</a> 
 <br /> 
 <a href="#" id="a3">Update amounts in row 1</a> 
 <br /> 
 <a href="#" id="a4">Add row with id 99</a>
 ... 
 <table id="list6"></table> 
 <div id="pager6"></div> <br /> 
 <a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url'));">Get url</a> 
 <br /> 
 <a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname'));">Get Sort Name</a> 
 <br /> 
 <a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder'));">Get Sort Order</a> 
 <br /> 
 <a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow'));">Get Selected Row</a> 
 <br /> 
 <a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page'));">Get Current Page</a> 
 <br /> 
 <a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum'));">Get Number of Rows requested</a> 
 <br /> 
 <a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example');">Get Selected Rows</a> 
 <br /> 
 <a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype'));">Get Data Type requested</a> 
 <br /> 
 <a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records'));">Get number of records in Grid</a>
 ... 
 <table id="list7"></table> 
 <div id="pager7"></div> 
 <br /> 
 <a href="javascript:void(0)" id="s1">Set new url</a> 
 <br /> 
 <a href="javascript:void(0)" id="s2">Set Sort to amount column</a> 
 <br /> 
 <a href="javascript:void(0)" id="s3" >Set Sort new Order</a> 
 <br /> 
 <a href="javascript:void(0)" id="s4">Set to view second Page</a> 
 <br /> 
 <a href="javascript:void(0)" id="s5">Set new Number of Rows(15)</a> 
 <br /> 
 <a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>
  ... 
  <table id="list9"></table> 
  <div id="pager9"></div> 
  <br /> 
  <a href="javascript:void(0)" id="m1">Get Selected id's</a> 
  <a href="javascript:void(0)" id="m1s">Select(Unselect) row 13</a>
  ... 
  Invoice Header 
  <table id="list10"></table> 
  <div id="pager10"></div> 
  <br /> 
  Invoice Detail 
  <table id="list10_d"></table> 
  <div id="pager10_d"></div> 
  <a href="javascript:void(0)" id="ms1">Get Selected id's</a>
  ... 
  <table id="list11">
  </table> <div id="pager11"></div> 
  <script src="subgrid.js" type="text/javascript"> </script>
  
  ... 
  <div class="h">Search By:</div> 
  <div> 
	<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch 
	<br/> 
	Code
	<br /> 
	<input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" /> 
  </div> 
  <div> Name<br> 
	<input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" /> 
	<button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button> 
  </div> 
  <br /> 
  <table id="bigset"></table> 
  <div id="pagerb"></div> 
  <script src="bigset.js" type="text/javascript"> </script>
  
  ... 
  <table id="list13"></table> 
  <div id="pager13"></div> <br /> 
  <a href="javascript:void(0)" id="cm1">Get Selected id's</a> 
  <a href="javascript:void(0)" id="cm1s">Select(Unselect) row 13</a> 
  <script src="cmultiex.js" type="text/javascript"> </script>
  
  ... 
  <table id="list15"></table> 
  <div id="pager15"></div> 
  <a href="javascript:void(0)" id="sids">Get Grid id's</a>
  <br/>
   
  ... 
  <table id="list17"></table> 
  <div id="pager17"></div> 
  <a href="javascript:void(0)" id="hc">Hide column Tax</a>
  <br/> 
  <a href="javascript:void(0)" id="sc">Show column Tax</a>
  
   ...
   <table id="rowed1"></table>
   <div id="prowed1"></div>
   <br />
   <input type="BUTTON" id="ed1" value="Edit row 13" />
   <input type="BUTTON" id="sved1" disabled='true' value="Save row 13" />
   <input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />
   <script src="rowedex1.js" type="text/javascript"> </script>
</html>