• [转]jqGrid 属性、事件全集

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

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

    [javascript] view plain copy print?
    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', 75,sortable:false},  
    12.                 {name:'id',index:'id', 75},   
    13.                 {name:'invdate',index:'invdate', 90},   
    14.                 {name:'name',index:'name', 100},   
    15.                 {name:'amount',index:'amount', 80, align:"right"},   
    16.                 {name:'tax',index:'tax', 80, align:"right"},   
    17.                 {name:'total',index:'total', 80,align:"right"},   
    18.                 {name:'note',index:'note', 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.             auto true, //自动列宽  
    28.              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;20px;' type='button' value='E' onclick="jQuery('#list1').editRow('"+cl+"');" />";  
    68.                     se = "<input style='height:22px;20px;' type='button' value='S' onclick="jQuery('#list1').saveRow('"+cl+"');" />";  
    69.                     ce = "<input style='height:22px;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",80,key:true},   
    97.                         {name:"item",index:"item",130},   
    98.                         {name:"qty",index:"qty",70,align:"right"},   
    99.                         {name:"unit",index:"unit",70,align:"right"},   
    100.                         {name:"total",index:"total",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  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.           
    136.         //子Grid  
    137.         jQuery("#list10_d").jqGrid({   
    138.             height: 100,   
    139.             url:'subgrid.php?q=1&id=0',   
    140.             datatype: "json",   
    141.             colNames:[  
    142.                 'No','Item', 'Qty', 'Unit','Line Total'  
    143.             ],   
    144.             colModel:[   
    145.                 {name:'num',index:'num', 55},   
    146.                 {name:'item',index:'item', 180},   
    147.                 {name:'qty',index:'qty', 80, align:"right"},   
    148.                 {name:'unit',index:'unit', 80, align:"right"},   
    149.                 {name:'linetotal',index:'linetotal', 80,align:"right", sortable:false, search:false}   
    150.             ],   
    151.             rowNum:5,   
    152.             rowList:[5,10,20],   
    153.             pager: '#pager10_d',   
    154.             sortname: 'item',   
    155.             viewrecords: true,   
    156.             sortorder: "asc",   
    157.             multiselect: true,   
    158.             caption:"Invoice Detail"   
    159.         }).navGrid('#pager10_d',{add:false,edit:false,del:false});  
    160.           
    161.         jQuery("#a1").click( function(){   
    162.             //获取Grid中选中的行id  
    163.             var id = jQuery("#list5").jqGrid('getGridParam','selrow');   
    164.             if (id) {   
    165.                 var ret = jQuery("#list5").jqGrid('getRowData',id);   
    166.                 alert("id="+ret.id+" invdate="+ret.invdate+"...");   
    167.             } else {   
    168.                 alert("Please select row");  
    169.             }   
    170.         });   
    171.         jQuery("#a2").click( function(){   
    172.             //删除第12行  
    173.             var su=jQuery("#list5").jqGrid('delRowData',12);   
    174.             if(su)   
    175.                 alert("Succes. Write custom code to delete row from server");   
    176.             else   
    177.                 alert("Allready deleted or not in list");   
    178.         });   
    179.         jQuery("#a3").click( function(){   
    180.             //修改第11行  
    181.             var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});   
    182.             if(su)   
    183.                 alert("Succes. Write custom code to update row in server");   
    184.             else   
    185.                 alert("Can not update");   
    186.         });   
    187.         jQuery("#a4").click( function(){   
    188.             //添加第99行（id为99的）  
    189.             var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};   
    190.             var su=jQuery("#list5").jqGrid('addRowData',99,datarow);   
    191.             if(su)   
    192.                 alert("Succes. Write custom code to add data in server");   
    193.             else   
    194.                 alert("Can not update");   
    195.         });  
    196.           
    197.         jQuery("#s1").click( function() {   
    198.             //设置URL  
    199.             jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");  
    200.         });   
    201.         jQuery("#s2").click( function() {   
    202.             //设置排序列  
    203.             jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");   
    204.         });   
    205.         jQuery("#s3").click( function() {   
    206.             //设置升序或倒序  
    207.             var so = jQuery("#list7").jqGrid('getGridParam','sortorder');   
    208.             so = so=="asc"?"desc":"asc";   
    209.             jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid");   
    210.         });   
    211.         jQuery("#s4").click( function() {   
    212.             //跳转到第二页  
    213.             jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");   
    214.         });   
    215.         jQuery("#s5").click( function() {   
    216.             //设置每页显示15行  
    217.             jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid");   
    218.         });   
    219.         jQuery("#s6").click( function() {   
    220.             //设置URL和数据格式  
    221.             jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");   
    222.         });   
    223.         jQuery("#s7").click( function() {   
    224.             //设置Grid的名称  
    225.             jQuery("#list7").jqGrid('setCaption',"New Caption");   
    226.         });   
    227.         jQuery("#s8").click( function() {   
    228.             //设置Grid排序字段，根据名称排序  
    229.             jQuery("#list7").jqGrid('sortGrid',"name",false);   
    230.         });  
    231.         jQuery("#m1").click( function() {   
    232.             //获取复选框被选中的id  
    233.             var s = jQuery("#list9").jqGrid('getGridParam','selarrrow');   
    234.             alert(s);   
    235.         });   
    236.         jQuery("#m1s").click( function() {   
    237.             //设置选中第13行  
    238.             jQuery("#list9").jqGrid('setSelection',"13");   
    239.         });  
    240.         jQuery("#ms1").click( function() {   
    241.             var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');   
    242.             alert(s);   
    243.         });  
    244.           
    245.         //Grid 查询  
    246.         var timeoutHnd;   
    247.         var flAuto = false;   
    248.         function doSearch(ev){   
    249.             if(!flAuto)   
    250.                 return;   
    251.             // var elem = ev.target||ev.srcElement;   
    252.             if(timeoutHnd)   
    253.                 clearTimeout(timeoutHnd)   
    254.             timeoutHnd = setTimeout(gridReload,500)   
    255.         }   
    256.         function gridReload(){   
    257.             var nm_mask = jQuery("#item_nm").val();   
    258.             var cd_mask = jQuery("#search_cd").val();   
    259.             jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");   
    260.         }   
    261.         function enableAutosubmit(state){   
    262.             flAuto = state;   
    263.             jQuery("#submitButton").attr("disabled",state);   
    264.         }  
    265.           
    266.         jQuery("#cm1").click( function() {   
    267.             //显示选中行  
    268.             var s;   
    269.             s = jQuery("#list13").jqGrid('getGridParam','selarrrow');   
    270.             alert(s);   
    271.         });   
    272.         jQuery("#cm1s").click( function() {   
    273.             //选中编号为13的行  
    274.             jQuery("#list13").jqGrid('setSelection',"13");   
    275.         });   
    276.         jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false},   
    277.             {}, // edit parameters   
    278.             {}, // add parameters   
    279.             {reloadAfterSubmit:false} //delete parameters   
    280.         );  
    281.           
    282.         jQuery("#sids").click( function() {   
    283.             //获取Grid中当页的所有ID  
    284.             alert("Id's of Grid:  "+jQuery("#list15").jqGrid('getDataIDs'));   
    285.         });  
    286.           
    287.         jQuery("#hc").click( function() {   
    288.             //隐藏tax列  
    289.             jQuery("#list17").jqGrid('navGrid','hideCol',"tax");   
    290.         });   
    291.         jQuery("#sc").click( function() {   
    292.             //显示tax列  
    293.             jQuery("#list17").jqGrid('navGrid','showCol',"tax");   
    294.         });  
    295.         jQuery("#ed1").click( function() {  
    296.             //编辑第13行  
    297.             jQuery("#rowed1").jqGrid('editRow',"13");  
    298.             this.disabled = 'true';  
    299.             jQuery("#sved1,#cned1").attr("disabled",false);   
    300.         });  
    301.         jQuery("#sved1").click( function() {  
    302.             //保存第13行  
    303.             jQuery("#rowed1").jqGrid('saveRow',"13");  
    304.             jQuery("#sved1,#cned1").attr("disabled",true);  
    305.             jQuery("#ed1").attr("disabled",false);   
    306.         });  
    307.         jQuery("#cned1").click( function() {  
    308.             //取消编辑第13行  
    309.             jQuery("#rowed1").jqGrid('restoreRow',"13");  
    310.             jQuery("#sved1,#cned1").attr("disabled",true);  
    311.             jQuery("#ed1").attr("disabled",false);  
    312.         });  
    313.     })  
    314. </script>  
    315.   
    316. //本地数组数据：datatype: "local",  
    317. var mydata = [   
    318.         {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},  
    319.                 {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},  
    320.                 {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},   
    321.                 {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},   
    322.                 {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},   
    323.                 {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},   
    324.                 {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},   
    325.                 {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},   
    326.                 {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}   
    327.     ];   
    328. for(var i=0;i<=mydata.length;i++)   
    329.     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', 75,sortable:false},
				{name:'id',index:'id', 75}, 
				{name:'invdate',index:'invdate', 90}, 
				{name:'name',index:'name', 100}, 
				{name:'amount',index:'amount', 80, align:"right"}, 
				{name:'tax',index:'tax', 80, align:"right"}, 
				{name:'total',index:'total', 80,align:"right"}, 
				{name:'note',index:'note', 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是否隐藏
			auto true, //自动列宽
			 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;20px;' type='button' value='E' onclick="jQuery('#list1').editRow('"+cl+"');" />";
					se = "<input style='height:22px;20px;' type='button' value='S' onclick="jQuery('#list1').saveRow('"+cl+"');" />";
					ce = "<input style='height:22px;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",80,key:true}, 
						{name:"item",index:"item",130}, 
						{name:"qty",index:"qty",70,align:"right"}, 
						{name:"unit",index:"unit",70,align:"right"}, 
						{name:"total",index:"total",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
 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', 55}, 
				{name:'item',index:'item', 180}, 
				{name:'qty',index:'qty', 80, align:"right"}, 
				{name:'unit',index:'unit', 80, align:"right"}, 
				{name:'linetotal',index:'linetotal', 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: 
"+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] view plain copy print?
    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.   ...   
    71.   <div class="h">Search By:</div>   
    72.   <div>   
    73.     <input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch   
    74.     <br/>   
    75.     Code  
    76.     <br />   
    77.     <input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" />   
    78.   </div>   
    79.   <div> Name<br>   
    80.     <input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />   
    81.     <button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>   
    82.   </div>   
    83.   <br />   
    84.   <table id="bigset"></table>   
    85.   <div id="pagerb"></div>   
    86.   <script src="bigset.js" type="text/javascript"> </script>  
    87.     
    88.   ...   
    89.   <table id="list13"></table>   
    90.   <div id="pager13"></div> <br />   
    91.   <a href="javascript:void(0)" id="cm1">Get Selected id's</a>   
    92.   <a href="javascript:void(0)" id="cm1s">Select(Unselect) row 13</a>   
    93.   <script src="cmultiex.js" type="text/javascript"> </script>  
    94.     
    95.   ...   
    96.   <table id="list15"></table>   
    97.   <div id="pager15"></div>   
    98.   <a href="javascript:void(0)" id="sids">Get Grid id's</a>  
    99.   <br/>  
    100.      
    101.   ...   
    102.   <table id="list17"></table>   
    103.   <div id="pager17"></div>   
    104.   <a href="javascript:void(0)" id="hc">Hide column Tax</a>  
    105.   <br/>   
    106.   <a href="javascript:void(0)" id="sc">Show column Tax</a>  
    107.     
    108.    ...  
    109.    <table id="rowed1"></table>  
    110.    <div id="prowed1"></div>  
    111.    <br />  
    112.    <input type="BUTTON" id="ed1" value="Edit row 13" />  
    113.    <input type="BUTTON" id="sved1" disabled='true' value="Save row 13" />  
    114.    <input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />  
    115.    <script src="rowedex1.js" type="text/javascript"> </script>  
    116. </html>  
  • 相关阅读:
    java 自定义表单 动态表单 表单设计器 工作流引擎 flowable 设计方案
    设置Springboot返回jackson数据序列化
    SpringCloud Alibaba 报 AbstractMethodError 是版本兼容问题导致
    Springboot进阶JDBC、Druid、Mybatis、Swagger、SpringMVC、Mail
    java 自定义表单 动态表单 表单设计器 工作流引擎 flowable 项目源码
    springcloud Alibaba 微服务 flowable 工作流 自定义表单 vue.js前后分离
    ClassLoader读取文件，springboot打jar包后读取不到
    Nginx/Tomcat/Apache的优缺点和区别
    Swagger3 相比2配置变了
    webloginc配置项目根目录
  • 原文地址：https://www.cnblogs.com/shizhijie/p/8427086.html
Copyright © 2020-2023  润新知