1 以下是jqGrid 最常用的属性和事件，经过一段时间的整理，终于弄的差不多了。版权所有，转载请注明出处，向您的厚道致敬！
2
3
4 [html]
5 <html>
6 ...
7 <table id="list1"></table>
8 <div id="pager1"></div>
9 ...
10 <table id="list5"></table>
11 <div id="pager5"></div> <br />
12 <a href="#" id="a1">Get data from selected row</a>
13 <br />
14 <a href="#" id="a2">Delete row 2</a>
15 <br />
16 <a href="#" id="a3">Update amounts in row 1</a>
17 <br />
18 <a href="#" id="a4">Add row with id 99</a>
19 ...
20 <table id="list6"></table>
21 <div id="pager6"></div> <br />
22 <a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url'));">Get url</a>
23 <br />
24 <a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname'));">Get Sort Name</a> www.2cto.com
25 <br />
26 <a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder'));">Get Sort Order</a>
27 <br />
28 <a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow'));">Get Selected Row</a>
29 <br />
30 <a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page'));">Get Current Page</a>
31 <br />
32 <a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum'));">Get Number of Rows requested</a>
33 <br />
34 <a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example');">Get Selected Rows</a>
35 <br />
36 <a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype'));">Get Data Type requested</a>
37 <br />
38 <a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records'));">Get number of records in Grid</a>
39 ...
40 <table id="list7"></table>
41 <div id="pager7"></div>
42 <br />
43 <a href="javascript:void(0)" id="s1">Set new url</a>
44 <br />
45 <a href="javascript:void(0)" id="s2">Set Sort to amount column</a>
46 <br />
47 <a href="javascript:void(0)" id="s3" >Set Sort new Order</a>
48 <br />
49 <a href="javascript:void(0)" id="s4">Set to view second Page</a>
50 <br />
51 <a href="javascript:void(0)" id="s5">Set new Number of Rows(15)</a>
52 <br />
53 <a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>
54 ...
55 <table id="list9"></table>
56 <div id="pager9"></div>
57 <br />
58 <a href="javascript:void(0)" id="m1">Get Selected id's</a>
59 <a href="javascript:void(0)" id="m1s">Select(Unselect) row 13</a>
60 ...
61 Invoice Header
62 <table id="list10"></table>
63 <div id="pager10"></div>
64 <br />
65 Invoice Detail
66 <table id="list10_d"></table>
67 <div id="pager10_d"></div>
68 <a href="javascript:void(0)" id="ms1">Get Selected id's</a>
69 ...
70 <table id="list11">
71 </table> <div id="pager11"></div>
72 <script src="subgrid.js" type="text/javascript"> </script>
73
74 ...
75 <div class="h">Search By:</div>
76 <div>
77 <input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch
78 <br/>
79 Code
80 <br />
81 <input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" />
82 </div>
83 <div> Name<br>
84 <input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />
85 <button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>
86 </div>
87 <br />
88 <table id="bigset"></table>
89 <div id="pagerb"></div>
90 <script src="bigset.js" type="text/javascript"> </script>
91
92 ...
93 <table id="list13"></table>
94 <div id="pager13"></div> <br />
95 <a href="javascript:void(0)" id="cm1">Get Selected id's</a>
96 <a href="javascript:void(0)" id="cm1s">Select(Unselect) row 13</a>
97 <script src="cmultiex.js" type="text/javascript"> </script>
98
99 ...
100 <table id="list15"></table>
101 <div id="pager15"></div>
102 <a href="javascript:void(0)" id="sids">Get Grid id's</a>
103 <br/>
104
105 ...
106 <table id="list17"></table>
107 <div id="pager17"></div>
108 <a href="javascript:void(0)" id="hc">Hide column Tax</a>
109 <br/>
110 <a href="javascript:void(0)" id="sc">Show column Tax</a>
111 </html>
112
113 <html>
114 ...
115 <table id="list1"></table>
116 <div id="pager1"></div>
117 ...
118 <table id="list5"></table>
119 <div id="pager5"></div> <br />
120 <a href="#" id="a1">Get data from selected row</a>
121 <br />
122 <a href="#" id="a2">Delete row 2</a>
123 <br />
124 <a href="#" id="a3">Update amounts in row 1</a>
125 <br />
126 <a href="#" id="a4">Add row with id 99</a>
127 ...
128 <table id="list6"></table>
129 <div id="pager6"></div> <br />
130 <a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url'));">Get url</a>
131 <br />
132 <a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname'));">Get Sort Name</a>
133 <br />
134 <a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder'));">Get Sort Order</a>
135 <br />
136 <a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow'));">Get Selected Row</a>
137 <br />
138 <a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page'));">Get Current Page</a>
139 <br />
140 <a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum'));">Get Number of Rows requested</a>
141 <br />
142 <a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example');">Get Selected Rows</a>
143 <br />
144 <a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype'));">Get Data Type requested</a>
145 <br />
146 <a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records'));">Get number of records in Grid</a>
147 ...
148 <table id="list7"></table>
149 <div id="pager7"></div>
150 <br />
151 <a href="javascript:void(0)" id="s1">Set new url</a>
152 <br />
153 <a href="javascript:void(0)" id="s2">Set Sort to amount column</a>
154 <br />
155 <a href="javascript:void(0)" id="s3" >Set Sort new Order</a>
156 <br />
157 <a href="javascript:void(0)" id="s4">Set to view second Page</a>
158 <br />
159 <a href="javascript:void(0)" id="s5">Set new Number of Rows(15)</a>
160 <br />
161 <a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>
162 ...
163 <table id="list9"></table>
164 <div id="pager9"></div>
165 <br />
166 <a href="javascript:void(0)" id="m1">Get Selected id's</a>
167 <a href="javascript:void(0)" id="m1s">Select(Unselect) row 13</a>
168 ...
169 Invoice Header
170 <table id="list10"></table>
171 <div id="pager10"></div>
172 <br />
173 Invoice Detail
174 <table id="list10_d"></table>
175 <div id="pager10_d"></div>
176 <a href="javascript:void(0)" id="ms1">Get Selected id's</a>
177 ...
178 <table id="list11">
179 </table> <div id="pager11"></div>
180 <script src="subgrid.js" type="text/javascript"> </script>
181
182 ...
183 <div class="h">Search By:</div>
184 <div>
185 <input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch
186 <br/>
187 Code
188 <br />
189 <input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" />
190 </div>
191 <div> Name<br>
192 <input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />
193 <button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>
194 </div>
195 <br />
196 <table id="bigset"></table>
197 <div id="pagerb"></div>
198 <script src="bigset.js" type="text/javascript"> </script>
199
200 ...
201 <table id="list13"></table>
202 <div id="pager13"></div> <br />
203 <a href="javascript:void(0)" id="cm1">Get Selected id's</a>
204 <a href="javascript:void(0)" id="cm1s">Select(Unselect) row 13</a>
205 <script src="cmultiex.js" type="text/javascript"> </script>
206
207 ...
208 <table id="list15"></table>
209 <div id="pager15"></div>
210 <a href="javascript:void(0)" id="sids">Get Grid id's</a>
211 <br/>
212
213 ...
214 <table id="list17"></table>
215 <div id="pager17"></div>
216 <a href="javascript:void(0)" id="hc">Hide column Tax</a>
217 <br/>
218 <a href="javascript:void(0)" id="sc">Show column Tax</a>
219 </html>
220 [javascript]
221 <script type="text/javascript">
222 jQuery().ready(function (){
223 //父Grid（主Grid）
224 jQuery("#list1").jqGrid({
225 url:'server.php?q=1',
226 //editurl:"someurl.php",
227 datatype: "json", //数据类型 datatype: "local", datatype: "xml",
228 colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
229 colModel:[
230 {name:'id',index:'id', width:75},
231 {name:'invdate',index:'invdate', width:90},
232 {name:'name',index:'name', width:100},
233 {name:'amount',index:'amount', width:80, align:"right"},
234 {name:'tax',index:'tax', width:80, align:"right"},
235 {name:'total',index:'total', width:80,align:"right"},
236 {name:'note',index:'note', width:150, sortable:false}
237 ],
238 rowNum:10, //每页数据显示条数
239 rowList:[10,20,30], //每页数据显示条数
240 pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面
241 sortname: 'id', //根据ID排序
242 viewrecords: true, //显示数据总记录数
243 sortorder: "desc", //倒序
244 hidegrid: false, //Grid是否隐藏
245 autowidth: true, //自动列宽
246 width: 500, //Grid 宽度
247 height: 200, //行高 height: "100%",
248 multiselect: true, //复选框
249 recordpos: 'left', //总记录显示位置：居左
250 mtype: "POST",
251 pgbuttons: false,
252 pgtext: false,
253 pginput: false,
254 multikey: "ctrlKey",
255 onSortCol: function(name,index){
256 //点击排序列，根据哪列排序
257 alert("Column Name: "+name+" Column Index: "+index);
258 },
259 ondblClickRow: function(id){
260 //双击行
261 alert("You double click row with id: "+id);
262 },
263 onSelectRow: function(ids) { //单击选择行
264 if(ids == null) {
265 ids=0;
266 if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) {
267 jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
268 jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
269 }
270 } else {
271 jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
272 jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
273 }
274 },
275 subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid
276 subGridUrl: 'subgrid.php?q=2', //内部Grid URL
277 subGridModel: [ { //内部Grid列
278 name : ['No','Item','Qty','Unit','Line Total'],
279 width : [55,200,80,80,80],
280 params: ['invdate'] //嵌套Grid参数
281 } ],
282 subGridRowExpanded: function(subgrid_id, row_id) { //Grid内部嵌套Grid
283 // we pass two parameters
284 // subgrid_id is a id of the div tag created whitin a table data
285 // the id of this elemenet is a combination of the "sg_" + id of the row
286 // the row_id is the id of the row // If we wan to pass additinal parameters to the url we can use
287 // a method getRowData(row_id) - which returns associative array in type name-value
288 // here we can easy construct the flowing
289 var subgrid_table_id, pager_id;
290 subgrid_table_id = subgrid_id+"_t";
291 pager_id = "p_"+subgrid_table_id;
292 $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
293 jQuery("#"+subgrid_table_id).jqGrid({
294 url:"subgrid.php?q=2&id="+row_id,
295 datatype: "xml",
296 colNames: ['No','Item','Qty','Unit','Line Total'],
297 colModel: [
298 {name:"num",index:"num",width:80,key:true},
299 {name:"item",index:"item",width:130},
300 {name:"qty",index:"qty",width:70,align:"right"},
301 {name:"unit",index:"unit",width:70,align:"right"},
302 {name:"total",index:"total",width:70,align:"right",sortable:false}
303 ],
304 rowNum:20,
305 pager: pager_id,
306 sortname: 'num',
307 sortorder: "asc",
308 height: '100%' //自动适应行高
309 });
310 jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});
311 },
312 subGridRowColapsed: function(subgrid_id, row_id) {
313 // this function is called before removing the data
314 //var subgrid_table_id;
315 //subgrid_table_id = subgrid_id+"_t";
316 //jQuery("#"+subgrid_table_id).remove();
317 },
318 loadComplete: function(){ //加载完成（初始加载），回调函数
319 var ret;
320 alert("This function is executed immediately after\n data is loaded. We try to update data in row 13.");
321 ret = jQuery("#list15").jqGrid('getRowData',"13");
322 if(ret.id == "13"){
323 jQuery("#list15").jqGrid('setRowData',ret.id,{note:"<font color='red'>Row 13 is updated!</font>"})
324 }
325 },
326 caption:"Grid Example" //Grid名称
327 }).navGrid('#pager1',{edit:false,add:false,del:false});
328 //jQuery("#list6").jqGrid('navGrid',"#pager6",{edit:false,add:false,del:false}); = .navGrid('#pager1',{edit:false,add:false,del:false});
329 //添加查询文本框
330 jQuery("#list7").jqGrid('navGrid','#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});
331 //查询和刷新按钮居右
332 jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});
333 //编辑行，添加Add、Edit、Save、Cancel按钮 //<script src="rowedex3.js" type="text/javascript"> </script>
334 jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3"); //<table id="rowed3"></table> <div id="prowed3"></div>
335
336 //子Grid
337 jQuery("#list10_d").jqGrid({
338 height: 100,
339 url:'subgrid.php?q=1&id=0',
340 datatype: "json",
341 colNames:[
342 'No','Item', 'Qty', 'Unit','Line Total'
343 ],
344 colModel:[
345 {name:'num',index:'num', width:55},
346 {name:'item',index:'item', width:180},
347 {name:'qty',index:'qty', width:80, align:"right"},
348 {name:'unit',index:'unit', width:80, align:"right"},
349 {name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false}
350 ],
351 rowNum:5,
352 rowList:[5,10,20],
353 pager: '#pager10_d',
354 sortname: 'item',
355 viewrecords: true,
356 sortorder: "asc",
357 multiselect: true,
358 caption:"Invoice Detail"
359 }).navGrid('#pager10_d',{add:false,edit:false,del:false});
360
361 jQuery("#a1").click( function(){
362 //获取Grid中选中的行id
363 var id = jQuery("#list5").jqGrid('getGridParam','selrow');
364 if (id) {
365 var ret = jQuery("#list5").jqGrid('getRowData',id);
366 alert("id="+ret.id+" invdate="+ret.invdate+"...");
367 } else {
368 alert("Please select row");
369 }
370 });
371 jQuery("#a2").click( function(){
372 //删除第12行
373 var su=jQuery("#list5").jqGrid('delRowData',12);
374 if(su)
375 alert("Succes. Write custom code to delete row from server");
376 else
377 alert("Allready deleted or not in list");
378 });
379 jQuery("#a3").click( function(){
380 //修改第11行
381 var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});
382 if(su)
383 alert("Succes. Write custom code to update row in server");
384 else
385 alert("Can not update");
386 });
387 jQuery("#a4").click( function(){
388 //添加第99行（id为99的）
389 var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
390 var su=jQuery("#list5").jqGrid('addRowData',99,datarow);
391 if(su)
392 alert("Succes. Write custom code to add data in server");
393 else
394 alert("Can not update");
395 });
396
397 jQuery("#s1").click( function() {
398 //设置URL
399 jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");
400 });
401 jQuery("#s2").click( function() {
402 //设置排序列
403 jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");
404 });
405 jQuery("#s3").click( function() {
406 //设置升序或倒序
407 var so = jQuery("#list7").jqGrid('getGridParam','sortorder');
408 so = so=="asc"?"desc":"asc";
409 jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid");
410 });
411 jQuery("#s4").click( function() {
412 //跳转到第二页
413 jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");
414 });
415 jQuery("#s5").click( function() {
416 //设置每页显示15行
417 jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid");
418 });
419 jQuery("#s6").click( function() {
420 //设置URL和数据格式
421 jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");
422 });
423 jQuery("#s7").click( function() {
424 //设置Grid的名称
425 jQuery("#list7").jqGrid('setCaption',"New Caption");
426 });
427 jQuery("#s8").click( function() {
428 //设置Grid排序字段，根据名称排序
429 jQuery("#list7").jqGrid('sortGrid',"name",false);
430 });
431 jQuery("#m1").click( function() {
432 //获取复选框被选中的id
433 var s = jQuery("#list9").jqGrid('getGridParam','selarrrow');
434 alert(s);
435 });
436 jQuery("#m1s").click( function() {
437 //设置选中第13行
438 jQuery("#list9").jqGrid('setSelection',"13");
439 });
440 jQuery("#ms1").click( function() {
441 var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');
442 alert(s);
443 });
444
445 //Grid 查询
446 var timeoutHnd;
447 var flAuto = false;
448 function doSearch(ev){
449 if(!flAuto)
450 return;
451 // var elem = ev.target||ev.srcElement;
452 if(timeoutHnd)
453 clearTimeout(timeoutHnd)
454 timeoutHnd = setTimeout(gridReload,500)
455 }
456 function gridReload(){
457 var nm_mask = jQuery("#item_nm").val();
458 var cd_mask = jQuery("#search_cd").val();
459 jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");
460 }
461 function enableAutosubmit(state){
462 flAuto = state;
463 jQuery("#submitButton").attr("disabled",state);
464 }
465
466 jQuery("#cm1").click( function() {
467 //显示选中行
468 var s;
469 s = jQuery("#list13").jqGrid('getGridParam','selarrrow');
470 alert(s);
471 });
472 jQuery("#cm1s").click( function() {
473 //选中编号为13的行
474 jQuery("#list13").jqGrid('setSelection',"13");
475 });
476 jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false},
477 {}, // edit parameters
478 {}, // add parameters
479 {reloadAfterSubmit:false} //delete parameters
480 );
481
482 jQuery("#sids").click( function() {
483 //获取Grid中当页的所有ID
484 alert("Id's of Grid: \n"+jQuery("#list15").jqGrid('getDataIDs'));
485 });
486
487 jQuery("#hc").click( function() {
488 //隐藏tax列
489 jQuery("#list17").jqGrid('navGrid','hideCol',"tax");
490 });
491 jQuery("#sc").click( function() {
492 //显示tax列
493 jQuery("#list17").jqGrid('navGrid','showCol',"tax");
494 });
495 })
496 </script>
497
498 //本地数组数据：datatype: "local",
499 var mydata = [
500 {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
501 {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
502 {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
503 {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
504 {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
505 {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
506 {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
507 {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
508 {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
509 ];
510 for(var i=0;i<=mydata.length;i++)
511 jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
512
513 <script type="text/javascript">
514 jQuery().ready(function (){
515 //父Grid（主Grid）
516 jQuery("#list1").jqGrid({
517 url:'server.php?q=1',
518 //editurl:"someurl.php",
519 datatype: "json", //数据类型 datatype: "local", datatype: "xml",
520 colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
521 colModel:[
522 {name:'id',index:'id', width:75},
523 {name:'invdate',index:'invdate', width:90},
524 {name:'name',index:'name', width:100},
525 {name:'amount',index:'amount', width:80, align:"right"},
526 {name:'tax',index:'tax', width:80, align:"right"},
527 {name:'total',index:'total', width:80,align:"right"},
528 {name:'note',index:'note', width:150, sortable:false}
529 ],
530 rowNum:10, //每页数据显示条数
531 rowList:[10,20,30], //每页数据显示条数
532 pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面
533 sortname: 'id', //根据ID排序
534 viewrecords: true, //显示数据总记录数
535 sortorder: "desc", //倒序
536 hidegrid: false, //Grid是否隐藏
537 autowidth: true, //自动列宽
538 width: 500, //Grid 宽度
539 height: 200, //行高 height: "100%",
540 multiselect: true, //复选框
541 recordpos: 'left', //总记录显示位置：居左
542 mtype: "POST",
543 pgbuttons: false,
544 pgtext: false,
545 pginput: false,
546 multikey: "ctrlKey",
547 onSortCol: function(name,index){
548 //点击排序列，根据哪列排序
549 alert("Column Name: "+name+" Column Index: "+index);
550 },
551 ondblClickRow: function(id){
552 //双击行
553 alert("You double click row with id: "+id);
554 },
555 onSelectRow: function(ids) { //单击选择行
556 if(ids == null) {
557 ids=0;
558 if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) {
559 jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
560 jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
561 }
562 } else {
563 jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
564 jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
565 }
566 },
567 subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid
568 subGridUrl: 'subgrid.php?q=2', //内部Grid URL
569 subGridModel: [ { //内部Grid列
570 name : ['No','Item','Qty','Unit','Line Total'],
571 width : [55,200,80,80,80],
572 params: ['invdate'] //嵌套Grid参数
573 } ],
574 subGridRowExpanded: function(subgrid_id, row_id) { //Grid内部嵌套Grid
575 // we pass two parameters
576 // subgrid_id is a id of the div tag created whitin a table data
577 // the id of this elemenet is a combination of the "sg_" + id of the row
578 // the row_id is the id of the row // If we wan to pass additinal parameters to the url we can use
579 // a method getRowData(row_id) - which returns associative array in type name-value
580 // here we can easy construct the flowing
581 var subgrid_table_id, pager_id;
582 subgrid_table_id = subgrid_id+"_t";
583 pager_id = "p_"+subgrid_table_id;
584 $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
585 jQuery("#"+subgrid_table_id).jqGrid({
586 url:"subgrid.php?q=2&id="+row_id,
587 datatype: "xml",
588 colNames: ['No','Item','Qty','Unit','Line Total'],
589 colModel: [
590 {name:"num",index:"num",width:80,key:true},
591 {name:"item",index:"item",width:130},
592 {name:"qty",index:"qty",width:70,align:"right"},
593 {name:"unit",index:"unit",width:70,align:"right"},
594 {name:"total",index:"total",width:70,align:"right",sortable:false}
595 ],
596 rowNum:20,
597 pager: pager_id,
598 sortname: 'num',
599 sortorder: "asc",
600 height: '100%' //自动适应行高
601 });
602 jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});
603 },
604 subGridRowColapsed: function(subgrid_id, row_id) {
605 // this function is called before removing the data
606 //var subgrid_table_id;
607 //subgrid_table_id = subgrid_id+"_t";
608 //jQuery("#"+subgrid_table_id).remove();
609 },
610 loadComplete: function(){ //加载完成（初始加载），回调函数
611 var ret;
612 alert("This function is executed immediately after\n data is loaded. We try to update data in row 13.");
613 ret = jQuery("#list15").jqGrid('getRowData',"13");
614 if(ret.id == "13"){
615 jQuery("#list15").jqGrid('setRowData',ret.id,{note:"<font color='red'>Row 13 is updated!</font>"})
616 }
617 },
618 caption:"Grid Example" //Grid名称
619 }).navGrid('#pager1',{edit:false,add:false,del:false});
620 //jQuery("#list6").jqGrid('navGrid',"#pager6",{edit:false,add:false,del:false}); = .navGrid('#pager1',{edit:false,add:false,del:false});
621 //添加查询文本框
622 jQuery("#list7").jqGrid('navGrid','#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});
623 //查询和刷新按钮居右
624 jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});
625 //编辑行，添加Add、Edit、Save、Cancel按钮 //<script src="rowedex3.js" type="text/javascript"> </script>
626 jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3"); //<table id="rowed3"></table> <div id="prowed3"></div>
627
628 //子Grid
629 jQuery("#list10_d").jqGrid({
630 height: 100,
631 url:'subgrid.php?q=1&id=0',
632 datatype: "json",
633 colNames:[
634 'No','Item', 'Qty', 'Unit','Line Total'
635 ],
636 colModel:[
637 {name:'num',index:'num', width:55},
638 {name:'item',index:'item', width:180},
639 {name:'qty',index:'qty', width:80, align:"right"},
640 {name:'unit',index:'unit', width:80, align:"right"},
641 {name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false}
642 ],
643 rowNum:5,
644 rowList:[5,10,20],
645 pager: '#pager10_d',
646 sortname: 'item',
647 viewrecords: true,
648 sortorder: "asc",
649 multiselect: true,
650 caption:"Invoice Detail"
651 }).navGrid('#pager10_d',{add:false,edit:false,del:false});
652
653 jQuery("#a1").click( function(){
654 //获取Grid中选中的行id
655 var id = jQuery("#list5").jqGrid('getGridParam','selrow');
656 if (id) {
657 var ret = jQuery("#list5").jqGrid('getRowData',id);
658 alert("id="+ret.id+" invdate="+ret.invdate+"...");
659 } else {
660 alert("Please select row");
661 }
662 });
663 jQuery("#a2").click( function(){
664 //删除第12行
665 var su=jQuery("#list5").jqGrid('delRowData',12);
666 if(su)
667 alert("Succes. Write custom code to delete row from server");
668 else
669 alert("Allready deleted or not in list");
670 });
671 jQuery("#a3").click( function(){
672 //修改第11行
673 var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});
674 if(su)
675 alert("Succes. Write custom code to update row in server");
676 else
677 alert("Can not update");
678 });
679 jQuery("#a4").click( function(){
680 //添加第99行（id为99的）
681 var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
682 var su=jQuery("#list5").jqGrid('addRowData',99,datarow);
683 if(su)
684 alert("Succes. Write custom code to add data in server");
685 else
686 alert("Can not update");
687 });
688
689 jQuery("#s1").click( function() {
690 //设置URL
691 jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");
692 });
693 jQuery("#s2").click( function() {
694 //设置排序列
695 jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");
696 });
697 jQuery("#s3").click( function() {
698 //设置升序或倒序
699 var so = jQuery("#list7").jqGrid('getGridParam','sortorder');
700 so = so=="asc"?"desc":"asc";
701 jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid");
702 });
703 jQuery("#s4").click( function() {
704 //跳转到第二页
705 jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");
706 });
707 jQuery("#s5").click( function() {
708 //设置每页显示15行
709 jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid");
710 });
711 jQuery("#s6").click( function() {
712 //设置URL和数据格式
713 jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");
714 });
715 jQuery("#s7").click( function() {
716 //设置Grid的名称
717 jQuery("#list7").jqGrid('setCaption',"New Caption");
718 });
719 jQuery("#s8").click( function() {
720 //设置Grid排序字段，根据名称排序
721 jQuery("#list7").jqGrid('sortGrid',"name",false);
722 });
723 jQuery("#m1").click( function() {
724 //获取复选框被选中的id
725 var s = jQuery("#list9").jqGrid('getGridParam','selarrrow');
726 alert(s);
727 });
728 jQuery("#m1s").click( function() {
729 //设置选中第13行
730 jQuery("#list9").jqGrid('setSelection',"13");
731 });
732 jQuery("#ms1").click( function() {
733 var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');
734 alert(s);
735 });
736
737 //Grid 查询
738 var timeoutHnd;
739 var flAuto = false;
740 function doSearch(ev){
741 if(!flAuto)
742 return;
743 // var elem = ev.target||ev.srcElement;
744 if(timeoutHnd)
745 clearTimeout(timeoutHnd)
746 timeoutHnd = setTimeout(gridReload,500)
747 }
748 function gridReload(){
749 var nm_mask = jQuery("#item_nm").val();
750 var cd_mask = jQuery("#search_cd").val();
751 jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");
752 }
753 function enableAutosubmit(state){
754 flAuto = state;
755 jQuery("#submitButton").attr("disabled",state);
756 }
757
758 jQuery("#cm1").click( function() {
759 //显示选中行
760 var s;
761 s = jQuery("#list13").jqGrid('getGridParam','selarrrow');
762 alert(s);
763 });
764 jQuery("#cm1s").click( function() {
765 //选中编号为13的行
766 jQuery("#list13").jqGrid('setSelection',"13");
767 });
768 jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false},
769 {}, // edit parameters
770 {}, // add parameters
771 {reloadAfterSubmit:false} //delete parameters
772 );
773
774 jQuery("#sids").click( function() {
775 //获取Grid中当页的所有ID
776 alert("Id's of Grid: \n"+jQuery("#list15").jqGrid('getDataIDs'));
777 });
778
779 jQuery("#hc").click( function() {
780 //隐藏tax列
781 jQuery("#list17").jqGrid('navGrid','hideCol',"tax");
782 });
783 jQuery("#sc").click( function() {
784 //显示tax列
785 jQuery("#list17").jqGrid('navGrid','showCol',"tax");
786 });
787 })
788 </script>
789
790 //本地数组数据：datatype: "local",
791 var mydata = [
792 {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
793 {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
794 {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
795 {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
796 {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
797 {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
798 {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
799 {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
800 {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
801 ];
802 for(var i=0;i<=mydata.length;i++)
803 jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
浙公网安备 33010602011771号