[转]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', 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.           
  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', width:55},   
  146.                 {name:'item',index:'item', width:180},   
  147.                 {name:'qty',index:'qty', width:80, align:"right"},   
  148.                 {name:'unit',index:'unit', width:80, align:"right"},   
  149.                 {name:'linetotal',index:'linetotal', width: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: \n"+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', 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] 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>  

 

posted @ 2018-02-07 15:58  人情世故  阅读(334)  评论(0)  编辑  收藏  举报
"不管做什么，只要坚持下去就会看到不一样！在路上，不卑不亢!"