以下是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 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]);
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>
本文出处：http://blog.csdn.net/a416090287/article/details/8334070
感谢：