jqGrid 属性、事件全集

时间2024-01-25 11:24:16发布访客分类HTML浏览437

导读：收集整理的这篇文章主要介绍了html5教程-jqGrid 属性、事件全集，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。以下是jqGrid 最常用...

[htML]

html>

...

table id="list1"> /table>

p id="pager1"> /p>

...

table id="list5"> /table>

p id="pager5"> /p> br />

a href="#" id="a1"> Get data From selected row/a>

br />

a href="#" id="a2"> Delete row 2/a>

br />

a href="#" id="a3"> Update amounts in row 1/a>

br />

a href="#" id="a4"> Add row wITh id 99/a>

...

table id="list6"> /table>

p id="pager6"> /p> br />

a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url')); "> Get url/a>

br />

a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname')); "> Get Sort Name/a> www.2cto.COM

br />

a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder')); "> Get Sort Order/a>

br />

a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow')); "> Get Selected Row/a>

br />

a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page')); "> Get current Page/a>

br />

a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum')); "> Get Number of Rows requested/a>

br />

a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example'); "> Get Selected Rows/a>

br />

a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatyPE')); "> Get Data Type requested/a>

br />

a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records')); "> Get number of records in Grid/a>

...

table id="list7"> /table>

p id="pager7"> /p>

br />

a href="javascript:void(0)" id="s1"> Set new url/a>

br />

a href="javascript:void(0)" id="s2"> Set Sort to amount column/a>

br />

a href="javascript:void(0)" id="s3" > Set Sort new Order/a>

br />

a href="javascript:void(0)" id="s4"> Set to view second Page/a>

br />

a href="javascript:void(0)" id="s5"> Set new Number of Rows(15)/a>

br />

a href="javascript:void(0)" id="s6" > Set Data Type from JSON to XMl/a>

...

table id="list9"> /table>

p id="pager9"> /p>

br />

a href="javascript:void(0)" id="m1"> Get Selected id's/a>

a href="javascript:void(0)" id="m1s"> Select(Unselect) row 13/a>

...

Invoice Header

table id="list10"> /table>

p id="pager10"> /p>

br />

Invoice Detail

table id="list10_d"> /table>

p id="pager10_d"> /p>

a href="javascript:void(0)" id="ms1"> Get Selected id's/a>

...

table id="list11">

/table> p id="pager11"> /p>

script src="subgrid.js" type="text/javascript"> /script>

...

p class="h"> SeArch By:/p>

input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch

br/>

Code

br />

input type="text" id="search_cd" onkeydown="DOSearch(arguments[0]||event)" />

/p>

p> Namebr>

input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />

button onclick="gridReload()" id="submitButton" style="margin-left:30px; "> Search/button>

/p>

br />

table id="Bigset"> /table>

p id="pagerb"> /p>

script src="bigset.js" type="text/javascript"> /script>

...

table id="list13"> /table>

p id="pager13"> /p> br />

a href="javascript:void(0)" id="cm1"> Get Selected id's/a>

a href="javascript:void(0)" id="cm1s"> Select(Unselect) row 13/a>

script src="cmultiex.js" type="text/javascript"> /script>

...

table id="list15"> /table>

p id="pager15"> /p>

a href="javascript:void(0)" id="sids"> Get Grid id's/a>

br/>

...

table id="list17"> /table>

p id="pager17"> /p>

a href="javascript:void(0)" id="hc"> Hide column Tax/a>

br/>

a href="javascript:void(0)" id="sc"> Show column Tax/a>

/html>

html>

...

table id="list1"> /table>

p id="pager1"> /p>

...

table id="list5"> /table>

p id="pager5"> /p> br />

a href="#" id="a1"> Get data from selected row/a>

br />

a href="#" id="a2"> Delete row 2/a>

br />

a href="#" id="a3"> Update amounts in row 1/a>

br />

a href="#" id="a4"> Add row with id 99/a>

...

table id="list6"> /table>

p id="pager6"> /p> br />

a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url')); "> Get url/a>

br />

a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname')); "> Get Sort Name/a>

br />

a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder')); "> Get Sort Order/a>

br />

a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow')); "> Get Selected Row/a>

br />

a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page')); "> Get Current Page/a>

br />

a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum')); "> Get Number of Rows requested/a>

br />

a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example'); "> Get Selected Rows/a>

br />

a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype')); "> Get Data Type requested/a>

br />

a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records')); "> Get number of records in Grid/a>

...

table id="list7"> /table>

p id="pager7"> /p>

br />

a href="javascript:void(0)" id="s1"> Set new url/a>

br />

a href="javascript:void(0)" id="s2"> Set Sort to amount column/a>

br />

a href="javascript:void(0)" id="s3" > Set Sort new Order/a>

br />

a href="javascript:void(0)" id="s4"> Set to view second Page/a>

br />

a href="javascript:void(0)" id="s5"> Set new Number of Rows(15)/a>

br />

a href="javascript:void(0)" id="s6" > Set Data Type from json to xml/a>

...

table id="list9"> /table>

p id="pager9"> /p>

br />

a href="javascript:void(0)" id="m1"> Get Selected id's/a>

a href="javascript:void(0)" id="m1s"> Select(Unselect) row 13/a>

...

Invoice Header

table id="list10"> /table>

p id="pager10"> /p>

br />

Invoice Detail

table id="list10_d"> /table>

p id="pager10_d"> /p>

a href="javascript:void(0)" id="ms1"> Get Selected id's/a>

...

table id="list11">

/table> p id="pager11"> /p>

script src="subgrid.js" type="text/javascript"> /script>

...

p class="h"> Search By:/p>

input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch

br/>

Code

br />

input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" />

/p>

p> Namebr>

input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />

button onclick="gridReload()" id="submitButton" style="margin-left:30px; "> Search/button>

/p>

br />

table id="bigset"> /table>

p id="pagerb"> /p>

script src="bigset.js" type="text/javascript"> /script>

...

table id="list13"> /table>

p id="pager13"> /p> br />

a href="javascript:void(0)" id="cm1"> Get Selected id's/a>

a href="javascript:void(0)" id="cm1s"> Select(Unselect) row 13/a>

script src="cmultiex.js" type="text/javascript"> /script>

...

table id="list15"> /table>

p id="pager15"> /p>

a href="javascript:void(0)" id="sids"> Get Grid id's/a>

br/>

...

table id="list17"> /table>

p id="pager17"> /p>

a href="javascript:void(0)" id="hc"> Hide column Tax/a>

br/>

a href="javascript:void(0)" id="sc"> Show column Tax/a>

/html>

[javascript]

script type="text/javascript">

jQuery().ready(function (){

//父Grid（主Grid）

jQuery("#list1").jqGrid({

url:'server.php?q=1',

//editurl:"someurl.php",

datatype: "json", //数据类型 datatype: "local", datatype: "xml",

colnames:['Inv No','Date', 'Client', 'Amount','Tax','total','Notes'],

colModel:[

{ 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的p里面

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');

}

} ,

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 p 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> p id='"+pager_id+"' class='scroll'> /p> ");

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名称

} ).navGrid('#pager1',{ edit:false,add:false,del:false} );

//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> p id="PRowed3"> /p>

//子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");

} );

} )

/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]);

script type="text/javascript">

jQuery().ready(function (){

//父Grid（主Grid）

jQuery("#list1").jqGrid({

url:'server.php?q=1',

//editurl:"someurl.php",

datatype: "json", //数据类型 datatype: "local", datatype: "xml",

colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],

colModel:[

{ 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的p里面

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');

}

} ,

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 p 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> p id='"+pager_id+"' class='scroll'> /p> ");

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名称

} ).navGrid('#pager1',{ edit:false,add:false,del:false} );

//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> p id="prowed3"> /p>