本文转自：http://blog.csdn.net/rosanu_blog/article/details/8334070

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

  1. <script type="text/javascript">
  2. var lastsel;
  3. jQuery().ready(function () {
  4. //父Grid（主Grid）
  5. jQuery("#list1").jqGrid({
  6. url:'server.php?q=1',
  7. editurl:"server.php",
  8. datatype: "json", //数据类型 datatype: "local", datatype: "xml",
  9. colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
  10. colModel:[
  11. {name:'act',index:'act', width:75,sortable:false},
  12. {name:'id',index:'id', width:75},
  13. {name:'invdate',index:'invdate', width:90},
  14. {name:'name',index:'name', width:100},
  15. {name:'amount',index:'amount', width:80, align:"right"},
  16. {name:'tax',index:'tax', width:80, align:"right"},
  17. {name:'total',index:'total', width:80,align:"right"},
  18. {name:'note',index:'note', width:150, sortable:false}
  19. ],
  20. rowNum:10, //每页数据显示条数
  21. rowList:[10,20,30], //每页数据显示条数
  22. pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面
  23. sortname: 'id', //根据ID排序
  24. viewrecords: true, //显示数据总记录数
  25. sortorder: "desc", //倒序
  26. hidegrid: false, //Grid是否隐藏
  27. autowidth: true, //自动列宽
  28. width: 500, //Grid 宽度
  29. height: 200, //行高 height: "100%",
  30. multiselect: true, //复选框
  31. recordpos: 'left', //总记录显示位置：居左
  32. mtype: "POST",
  33. pgbuttons: false,
  34. pgtext: false,
  35. pginput: false,
  36. multikey: "ctrlKey",
  37. onSortCol: function(name,index){
  38. //点击排序列，根据哪列排序
  39. alert("Column Name: "+name+" Column Index: "+index);
  40. },
  41. ondblClickRow: function(id){
  42. //双击行
  43. alert("You double click row with id: "+id);
  44. },
  45. onSelectRow: function(ids) { //单击选择行
  46. if(ids == null) {
  47. ids=0;
  48. if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) {
  49. jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
  50. jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
  51. }
  52. } else {
  53. jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
  54. jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
  55. }
  56. //点击Grid，将行变为编辑状态
  57. if(id && id!==lastsel){
  58. jQuery('#rowed3').jqGrid('restoreRow',lastsel);
  59. jQuery('#rowed3').jqGrid('editRow',id,true); lastsel=id;
  60. }
  61. },
  62. gridComplete: function(){
  63. //在Grid的第一列（Actions）中添加按钮E、S、C，添加增、删、查、改按钮；
  64. var ids = jQuery("#list1").jqGrid('getDataIDs');
  65. for(var i=0;i < ids.length;i++){
  66. var cl = ids[i];
  67. be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list1').editRow('"+cl+"');\" />";
  68. se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list1').saveRow('"+cl+"');\" />";
  69. ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list1').restoreRow('"+cl+"');\" />";
  70. jQuery("#list1").jqGrid('setRowData',ids[i],{act:be+se+ce});
  71. }
  72. },
  73. subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid
  74. subGridUrl: 'subgrid.php?q=2', //内部Grid URL
  75. subGridModel: [ { //内部Grid列
  76. name : ['No','Item','Qty','Unit','Line Total'],
  77. width : [55,200,80,80,80],
  78. params: ['invdate'] //嵌套Grid参数
  79. } ],
  80. subGridRowExpanded: function(subgrid_id, row_id) { //Grid内部嵌套Grid
  81. // we pass two parameters
  82. // subgrid_id is a id of the div tag created whitin a table data
  83. // the id of this elemenet is a combination of the "sg_" + id of the row
  84. // the row_id is the id of the row // If we wan to pass additinal parameters to the url we can use
  85. // a method getRowData(row_id) - which returns associative array in type name-value
  86. // here we can easy construct the flowing
  87. var subgrid_table_id, pager_id;
  88. subgrid_table_id = subgrid_id+"_t";
  89. pager_id = "p_"+subgrid_table_id;
  90. $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
  91. jQuery("#"+subgrid_table_id).jqGrid({
  92. url:"subgrid.php?q=2&id="+row_id,
  93. datatype: "xml",
  94. colNames: ['No','Item','Qty','Unit','Line Total'],
  95. colModel: [
  96. {name:"num",index:"num",width:80,key:true},
  97. {name:"item",index:"item",width:130},
  98. {name:"qty",index:"qty",width:70,align:"right"},
  99. {name:"unit",index:"unit",width:70,align:"right"},
  100. {name:"total",index:"total",width:70,align:"right",sortable:false}
  101. ],
  102. rowNum:20,
  103. pager: pager_id,
  104. sortname: 'num',
  105. sortorder: "asc",
  106. height: '100%' //自动适应行高
  107. });
  108. jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});
  109. },
  110. subGridRowColapsed: function(subgrid_id, row_id) {
  111. // this function is called before removing the data
  112. //var subgrid_table_id;
  113. //subgrid_table_id = subgrid_id+"_t";
  114. //jQuery("#"+subgrid_table_id).remove();
  115. },
  116. loadComplete: function(){ //加载完成（初始加载），回调函数
  117. var ret;
  118. alert("This function is executed immediately after\n data is loaded. We try to update data in row 13.");
  119. ret = jQuery("#list15").jqGrid('getRowData',"13");
  120. if(ret.id == "13"){
  121. jQuery("#list15").jqGrid('setRowData',ret.id,{note:"<font color='red'>Row 13 is updated!</font>"})
  122. }
  123. },
  124. caption:"Grid Example" //Grid名称
  125. }, {singleselect: true, lazyload: true}).navGrid('#pager1',{edit:false,add:false,del:false});
  126. //singleselect: true 设置jqGrid复选框为单选
  127. //lazyload: true 设置jqGrid不自动加载
  128. //jQuery("#list6").jqGrid('navGrid',"#pager6",{edit:false,add:false,del:false}); = .navGrid('#pager1',{edit:false,add:false,del:false});
  129. //添加查询文本框
  130. jQuery("#list7").jqGrid('navGrid','#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});
  131. //查询和刷新按钮居右
  132. jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});
  133. //编辑行，添加Add、Edit、Save、Cancel按钮 //<script src="rowedex3.js" type="text/javascript"> </script>
  134. jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3");   //<table id="rowed3"></table> <div id="prowed3"></div>
  135. //子Grid
  136. jQuery("#list10_d").jqGrid({
  137. height: 100,
  138. url:'subgrid.php?q=1&id=0',
  139. datatype: "json",
  140. colNames:[
  141. 'No','Item', 'Qty', 'Unit','Line Total'
  142. ],
  143. colModel:[
  144. {name:'num',index:'num', width:55},
  145. {name:'item',index:'item', width:180},
  146. {name:'qty',index:'qty', width:80, align:"right"},
  147. {name:'unit',index:'unit', width:80, align:"right"},
  148. {name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false}
  149. ],
  150. rowNum:5,
  151. rowList:[5,10,20],
  152. pager: '#pager10_d',
  153. sortname: 'item',
  154. viewrecords: true,
  155. sortorder: "asc",
  156. multiselect: true,
  157. caption:"Invoice Detail"
  158. }).navGrid('#pager10_d',{add:false,edit:false,del:false});
  159. jQuery("#a1").click( function(){
  160. //获取Grid中选中的行id
  161. var id = jQuery("#list5").jqGrid('getGridParam','selrow');
  162. if (id) {
  163. var ret = jQuery("#list5").jqGrid('getRowData',id);
  164. alert("id="+ret.id+" invdate="+ret.invdate+"...");
  165. } else {
  166. alert("Please select row");
  167. }
  168. });
  169. jQuery("#a2").click( function(){
  170. //删除第12行
  171. var su=jQuery("#list5").jqGrid('delRowData',12);
  172. if(su)
  173. alert("Succes. Write custom code to delete row from server");
  174. else
  175. alert("Allready deleted or not in list");
  176. });
  177. jQuery("#a3").click( function(){
  178. //修改第11行
  179. var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});
  180. if(su)
  181. alert("Succes. Write custom code to update row in server");
  182. else
  183. alert("Can not update");
  184. });
  185. jQuery("#a4").click( function(){
  186. //添加第99行（id为99的）
  187. var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
  188. var su=jQuery("#list5").jqGrid('addRowData',99,datarow);
  189. if(su)
  190. alert("Succes. Write custom code to add data in server");
  191. else
  192. alert("Can not update");
  193. });
  194. jQuery("#s1").click( function() {
  195. //设置URL
  196. jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");
  197. });
  198. jQuery("#s2").click( function() {
  199. //设置排序列
  200. jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");
  201. });
  202. jQuery("#s3").click( function() {
  203. //设置升序或倒序
  204. var so = jQuery("#list7").jqGrid('getGridParam','sortorder');
  205. so = so=="asc"?"desc":"asc";
  206. jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid");
  207. });
  208. jQuery("#s4").click( function() {
  209. //跳转到第二页
  210. jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");
  211. });
  212. jQuery("#s5").click( function() {
  213. //设置每页显示15行
  214. jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid");
  215. });
  216. jQuery("#s6").click( function() {
  217. //设置URL和数据格式
  218. jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");
  219. });
  220. jQuery("#s7").click( function() {
  221. //设置Grid的名称
  222. jQuery("#list7").jqGrid('setCaption',"New Caption");
  223. });
  224. jQuery("#s8").click( function() {
  225. //设置Grid排序字段，根据名称排序
  226. jQuery("#list7").jqGrid('sortGrid',"name",false);
  227. });
  228. jQuery("#m1").click( function() {
  229. //获取复选框被选中的id
  230. var s = jQuery("#list9").jqGrid('getGridParam','selarrrow');
  231. alert(s);
  232. });
  233. jQuery("#m1s").click( function() {
  234. //设置选中第13行
  235. jQuery("#list9").jqGrid('setSelection',"13");
  236. });
  237. jQuery("#ms1").click( function() {
  238. var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');
  239. alert(s);
  240. });
  241. //Grid 查询
  242. var timeoutHnd;
  243. var flAuto = false;
  244. function doSearch(ev){
  245. if(!flAuto)
  246. return;
  247. // var elem = ev.target||ev.srcElement;
  248. if(timeoutHnd)
  249. clearTimeout(timeoutHnd)
  250. timeoutHnd = setTimeout(gridReload,500)
  251. }
  252. function gridReload(){
  253. var nm_mask = jQuery("#item_nm").val();
  254. var cd_mask = jQuery("#search_cd").val();
  255. jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");
  256. }
  257. function enableAutosubmit(state){
  258. flAuto = state;
  259. jQuery("#submitButton").attr("disabled",state);
  260. }
  261. jQuery("#cm1").click( function() {
  262. //显示选中行
  263. var s;
  264. s = jQuery("#list13").jqGrid('getGridParam','selarrrow');
  265. alert(s);
  266. });
  267. jQuery("#cm1s").click( function() {
  268. //选中编号为13的行
  269. jQuery("#list13").jqGrid('setSelection',"13");
  270. });
  271. jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false},
  272. {}, // edit parameters
  273. {}, // add parameters
  274. {reloadAfterSubmit:false} //delete parameters
  275. );
  276. jQuery("#sids").click( function() {
  277. //获取Grid中当页的所有ID
  278. alert("Id's of Grid: \n"+jQuery("#list15").jqGrid('getDataIDs'));
  279. });
  280. jQuery("#hc").click( function() {
  281. //隐藏tax列
  282. jQuery("#list17").jqGrid('navGrid','hideCol',"tax");
  283. });
  284. jQuery("#sc").click( function() {
  285. //显示tax列
  286. jQuery("#list17").jqGrid('navGrid','showCol',"tax");
  287. });
  288. jQuery("#ed1").click( function() {
  289. //编辑第13行
  290. jQuery("#rowed1").jqGrid('editRow',"13");
  291. this.disabled = 'true';
  292. jQuery("#sved1,#cned1").attr("disabled",false);
  293. });
  294. jQuery("#sved1").click( function() {
  295. //保存第13行
  296. jQuery("#rowed1").jqGrid('saveRow',"13");
  297. jQuery("#sved1,#cned1").attr("disabled",true);
  298. jQuery("#ed1").attr("disabled",false);
  299. });
  300. jQuery("#cned1").click( function() {
  301. //取消编辑第13行
  302. jQuery("#rowed1").jqGrid('restoreRow',"13");
  303. jQuery("#sved1,#cned1").attr("disabled",true);
  304. jQuery("#ed1").attr("disabled",false);
  305. });
  306. })
  307. </script>
  308. //本地数组数据：datatype: "local",
  309. var mydata = [
  310. {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  311. {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  312. {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  313. {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  314. {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  315. {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  316. {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  317. {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  318. {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
  319. ];
  320. for(var i=0;i<=mydata.length;i++)
  321. jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
<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]);
  1. <html>
  2. ...
  3. <table id="list1"></table>
  4. <div id="pager1"></div>
  5. ...
  6. <table id="list5"></table>
  7. <div id="pager5"></div> <br />
  8. <a href="#" id="a1">Get data from selected row</a>
  9. <br />
  10. <a href="#" id="a2">Delete row 2</a>
  11. <br />
  12. <a href="#" id="a3">Update amounts in row 1</a>
  13. <br />
  14. <a href="#" id="a4">Add row with id 99</a>
  15. ...
  16. <table id="list6"></table>
  17. <div id="pager6"></div> <br />
  18. <a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url'));">Get url</a>
  19. <br />
  20. <a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname'));">Get Sort Name</a>
  21. <br />
  22. <a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder'));">Get Sort Order</a>
  23. <br />
  24. <a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow'));">Get Selected Row</a>
  25. <br />
  26. <a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page'));">Get Current Page</a>
  27. <br />
  28. <a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum'));">Get Number of Rows requested</a>
  29. <br />
  30. <a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example');">Get Selected Rows</a>
  31. <br />
  32. <a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype'));">Get Data Type requested</a>
  33. <br />
  34. <a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records'));">Get number of records in Grid</a>
  35. ...
  36. <table id="list7"></table>
  37. <div id="pager7"></div>
  38. <br />
  39. <a href="javascript:void(0)" id="s1">Set new url</a>
  40. <br />
  41. <a href="javascript:void(0)" id="s2">Set Sort to amount column</a>
  42. <br />
  43. <a href="javascript:void(0)" id="s3" >Set Sort new Order</a>
  44. <br />
  45. <a href="javascript:void(0)" id="s4">Set to view second Page</a>
  46. <br />
  47. <a href="javascript:void(0)" id="s5">Set new Number of Rows(15)</a>
  48. <br />
  49. <a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>
  50. ...
  51. <table id="list9"></table>
  52. <div id="pager9"></div>
  53. <br />
  54. <a href="javascript:void(0)" id="m1">Get Selected id's</a>
  55. <a href="javascript:void(0)" id="m1s">Select(Unselect) row 13</a>
  56. ...
  57. Invoice Header
  58. <table id="list10"></table>
  59. <div id="pager10"></div>
  60. <br />
  61. Invoice Detail
  62. <table id="list10_d"></table>
  63. <div id="pager10_d"></div>
  64. <a href="javascript:void(0)" id="ms1">Get Selected id's</a>
  65. ...
  66. <table id="list11">
  67. </table> <div id="pager11"></div>
  68. <script src="subgrid.js" type="text/javascript"> </script>
  69. ...
  70. <div class="h">Search By:</div>
  71. <div>
  72. <input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch
  73. <br/>
  74. Code
  75. <br />
  76. <input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" />
  77. </div>
  78. <div> Name<br>
  79. <input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />
  80. <button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>
  81. </div>
  82. <br />
  83. <table id="bigset"></table>
  84. <div id="pagerb"></div>
  85. <script src="bigset.js" type="text/javascript"> </script>
  86. ...
  87. <table id="list13"></table>
  88. <div id="pager13"></div> <br />
  89. <a href="javascript:void(0)" id="cm1">Get Selected id's</a>
  90. <a href="javascript:void(0)" id="cm1s">Select(Unselect) row 13</a>
  91. <script src="cmultiex.js" type="text/javascript"> </script>
  92. ...
  93. <table id="list15"></table>
  94. <div id="pager15"></div>
  95. <a href="javascript:void(0)" id="sids">Get Grid id's</a>
  96. <br/>
  97. ...
  98. <table id="list17"></table>
  99. <div id="pager17"></div>
  100. <a href="javascript:void(0)" id="hc">Hide column Tax</a>
  101. <br/>
  102. <a href="javascript:void(0)" id="sc">Show column Tax</a>
  103. ...
  104. <table id="rowed1"></table>
  105. <div id="prowed1"></div>
  106. <br />
  107. <input type="BUTTON" id="ed1" value="Edit row 13" />
  108. <input type="BUTTON" id="sved1" disabled='true' value="Save row 13" />
  109. <input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />
  110. <script src="rowedex1.js" type="text/javascript"> </script>
  111. </html>

[转]jqGrid 属性、事件全集的更多相关文章

  1. jqGrid属性中文详细说明

    jqGrid属性中文详细说明 jqGrid的属性很多,其实很大部分的属性,使用其默认值就可以了.但是详细了解一下属性的含义以及作用,对我们定制自己的grid是有帮助的. 以下内容描述格式是:属性名称 ...

  2. HTML-全局属性 / 事件属性（转）

    拷贝自:< http://www.runoob.com > HTML 全局属性 New : HTML5 新属性. 属性 描述 accesskey 设置访问元素的键盘快捷键. class 规 ...

  3. C# 属性事件一些设置说明

    大致列举一些常用的属性或事件的一些修饰 用法类似,主要是对属性的进一步设置 [Browsable(true)] public bool Enable {get;set;} 顺便说一下事件的应用: pu ...

  4. DELPHI控件属性事件说明

    常用DELPHI控件属性事件设置说明 常用DELPHI控件属性设置说明目录TForm Class TPanel组件 TToolBar Class TToolButton Class TTimer Cl ...

  5. js 中HTML的 onkeycode 和onkeydown属性事件

    <!DOCTYPE html><html><head><script>function displayResult(){var x=document.g ...

  6. jqGrid 属性、事件全集

    <html> ... <table id="list1"></table> <div id="pager1">& ...

  7. jqgrid属性以及事件

    转载 1.属性 参数名称 类型 描述 默认值 是否可以被修改 ajaxGridOptions object 对ajax参数进行全局设置,可以覆盖ajax事件:error,complete 和 befo ...

  8. jqGrid属性中文详细说明 (转)

    jqGrid的属性很多,其实很大部分的属性,使用其默认值就可以了.但是详细了解一下属性的含义以及作用,对我们定制自己的grid是有帮助的. 以下内容描述格式是:属性名称 参数值类型    描述内容(可 ...

  9. jQuery Colorpicker Spectrum api 中文 文档 属性 事件 方法

    jQuery Colorpicker Spectrum 所需的CSS和JavaScript文件: <script src='spectrum.js'></script> < ...

随机推荐

  1. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  2. IKONS – 赞！264 款手工打造的免费矢量图标

    IKONS 是一套免费的矢量图标集,包含264款手工精心制作的可伸缩的矢量图标,分享给网页设计人员和开发人员.这些图标提供了 SVG.AI.ESP.PSD.CSH 和 PNG 格式.所有的图标都可以免 ...

  3. MySQL支持的数据类型

    1.整型 MySQL数据类型 含义(有符号) tinyint(m) 1个字节 范围(-128~127) smallint(m) 2个字节 范围(-32768~32767) mediumint(m) 3 ...

  4. PyInstaller编译python3时使用的详细参数介绍

    继续翻译中.... The syntax of the pyinstaller command is: pyinstaller [options] script [script ...] | spec ...

  5. 一级缓存、二级缓存、延迟加载、hibernate session 域 pojo三种状态

    1.一级缓存(session缓存 ).二级缓存      意义:提高hibernate查询效率.    缺点:可能会因并发,产生数据不一致.      本质:基于session 的缓存,利用hiber ...

  6. 删除项目中的CocoaPods

    项目中如果使用了CocoaPods,但需要彻底删除,怎么办? 1.进入项目根目录,删除与Pod相关的文件 2.打开项目 3.删除项目中的Pods文件夹 4.编译,会报错,解决方法如下 5.编译,还会报 ...

  7. vs出现“已经在解决方案中打开了具有该名称的项目”问题的解决方案

    经过本人测试,这种问题一般出现在装了svn的项目. 其实删除了删除sln和csproj文件中的SVN配置信息就行了 需要删除的信息 sln文件中: GlobalSection(SubversionSc ...

  8. Play Framework 第一个应用

    熟悉的Hello World 新创建一个工程,了解下重要文件的结构 .\app controllers\models\views 目前比较流行的MVC架构 .\conf application.con ...

  9. 使用Gradle构建构建一个Java Web工程及持续集成环境Jenkins配置

    安装Eclipse插件——Buildship 什么是Buildship? Buildship能方便我们通过Eclipse IDE创建和导入Gradle工程,同时还能执行Gradle任务. Eclips ...

  10. FileOutputStream VS FileWriter

    当我们使用Java往文件写入数据的时候,我们有两种方式,使用FileOutputStream或FileWriter. FileOutputStream: File fout = new File(fi ...