jqGrid 最常用的属性和事件，供平时参考（转）
[html]
<html>
...
<table id="list1"></table>
<div id="pager1"></div>
...
<table id="list5"></table>
<div id="pager5"></div> <br />
<a href="#" id="a1">Get data from selected row</a>
<br />
<a href="#" id="a2">Delete row </a>
<br />
<a href="#" id="a3">Update amounts in row </a>
<br />
<a href="#" id="a4">Add row with id </a>
...
<table id="list6"></table>
<div id="pager6"></div> <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>
<div id="pager7"></div>
<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()</a>
<br />
<a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>
...
<table id="list9"></table>
<div id="pager9"></div>
<br />
<a href="javascript:void(0)" id="m1">Get Selected id's</a>
<a href="javascript:void(0)" id="m1s">Select(Unselect) row </a>
...
Invoice Header
<table id="list10"></table>
<div id="pager10"></div>
<br />
Invoice Detail
<table id="list10_d"></table>
<div id="pager10_d"></div>
<a href="javascript:void(0)" id="ms1">Get Selected id's</a>
...
<table id="list11">
</table> <div id="pager11"></div>
<script src="subgrid.js" type="text/javascript"> </script> ...
<div class="h">Search By:</div>
<div>
<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)" />
</div>
<div> Name<br>
<input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />
<button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>
</div>
<br />
<table id="bigset"></table>
<div id="pagerb"></div>
<script src="bigset.js" type="text/javascript"> </script> ...
<table id="list13"></table>
<div id="pager13"></div> <br />
<a href="javascript:void(0)" id="cm1">Get Selected id's</a>
<a href="javascript:void(0)" id="cm1s">Select(Unselect) row </a>
<script src="cmultiex.js" type="text/javascript"> </script> ...
<table id="list15"></table>
<div id="pager15"></div>
<a href="javascript:void(0)" id="sids">Get Grid id's</a>
<br/> ...
<table id="list17"></table>
<div id="pager17"></div>
<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>
<div id="pager1"></div>
...
<table id="list5"></table>
<div id="pager5"></div> <br />
<a href="#" id="a1">Get data from selected row</a>
<br />
<a href="#" id="a2">Delete row </a>
<br />
<a href="#" id="a3">Update amounts in row </a>
<br />
<a href="#" id="a4">Add row with id </a>
...
<table id="list6"></table>
<div id="pager6"></div> <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>
<div id="pager7"></div>
<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()</a>
<br />
<a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>
...
<table id="list9"></table>
<div id="pager9"></div>
<br />
<a href="javascript:void(0)" id="m1">Get Selected id's</a>
<a href="javascript:void(0)" id="m1s">Select(Unselect) row </a>
...
Invoice Header
<table id="list10"></table>
<div id="pager10"></div>
<br />
Invoice Detail
<table id="list10_d"></table>
<div id="pager10_d"></div>
<a href="javascript:void(0)" id="ms1">Get Selected id's</a>
...
<table id="list11">
</table> <div id="pager11"></div>
<script src="subgrid.js" type="text/javascript"> </script> ...
<div class="h">Search By:</div>
<div>
<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)" />
</div>
<div> Name<br>
<input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />
<button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>
</div>
<br />
<table id="bigset"></table>
<div id="pagerb"></div>
<script src="bigset.js" type="text/javascript"> </script> ...
<table id="list13"></table>
<div id="pager13"></div> <br />
<a href="javascript:void(0)" id="cm1">Get Selected id's</a>
<a href="javascript:void(0)" id="cm1s">Select(Unselect) row </a>
<script src="cmultiex.js" type="text/javascript"> </script> ...
<table id="list15"></table>
<div id="pager15"></div>
<a href="javascript:void(0)" id="sids">Get Grid id's</a>
<br/> ...
<table id="list17"></table>
<div id="pager17"></div>
<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:},
{name:'invdate',index:'invdate', width:},
{name:'name',index:'name', width:},
{name:'amount',index:'amount', width:, align:"right"},
{name:'tax',index:'tax', width:, align:"right"},
{name:'total',index:'total', width:,align:"right"},
{name:'note',index:'note', width:, sortable:false}
],
rowNum:, //每页数据显示条数
rowList:[,,], //每页数据显示条数
pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面
sortname: 'id', //根据ID排序
viewrecords: true, //显示数据总记录数
sortorder: "desc", //倒序
hidegrid: false, //Grid是否隐藏
autowidth: true, //自动列宽
width: , //Grid 宽度
height: , //行高 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=;
if(jQuery("#list10_d").jqGrid('getGridParam','records') > ) {
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:});
jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
}
} else {
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:});
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 : [,,,,],
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:,key:true},
{name:"item",index:"item",width:},
{name:"qty",index:"qty",width:,align:"right"},
{name:"unit",index:"unit",width:,align:"right"},
{name:"total",index:"total",width:,align:"right",sortable:false}
],
rowNum:,
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',"");
if(ret.id == ""){
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> <div id="prowed3"></div> //子Grid
jQuery("#list10_d").jqGrid({
height: ,
url:'subgrid.php?q=1&id=0',
datatype: "json",
colNames:[
'No','Item', 'Qty', 'Unit','Line Total'
],
colModel:[
{name:'num',index:'num', width:},
{name:'item',index:'item', width:},
{name:'qty',index:'qty', width:, align:"right"},
{name:'unit',index:'unit', width:, align:"right"},
{name:'linetotal',index:'linetotal', width:,align:"right", sortable:false, search:false}
],
rowNum:,
rowList:[,,],
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',);
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',,{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:"",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
var su=jQuery("#list5").jqGrid('addRowData',,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:}).trigger("reloadGrid");
});
jQuery("#s5").click( function() {
//设置每页显示15行
jQuery("#list7").jqGrid('setGridParam',{rowNum:}).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',"");
});
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,)
}
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:}).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',"");
});
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:"",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+,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:},
{name:'invdate',index:'invdate', width:},
{name:'name',index:'name', width:},
{name:'amount',index:'amount', width:, align:"right"},
{name:'tax',index:'tax', width:, align:"right"},
{name:'total',index:'total', width:,align:"right"},
{name:'note',index:'note', width:, sortable:false}
],
rowNum:, //每页数据显示条数
rowList:[,,], //每页数据显示条数
pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面
sortname: 'id', //根据ID排序
viewrecords: true, //显示数据总记录数
sortorder: "desc", //倒序
hidegrid: false, //Grid是否隐藏
autowidth: true, //自动列宽
width: , //Grid 宽度
height: , //行高 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=;
if(jQuery("#list10_d").jqGrid('getGridParam','records') > ) {
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:});
jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
}
} else {
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:});
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 : [,,,,],
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:,key:true},
{name:"item",index:"item",width:},
{name:"qty",index:"qty",width:,align:"right"},
{name:"unit",index:"unit",width:,align:"right"},
{name:"total",index:"total",width:,align:"right",sortable:false}
],
rowNum:,
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',"");
if(ret.id == ""){
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> <div id="prowed3"></div> //子Grid
jQuery("#list10_d").jqGrid({
height: ,
url:'subgrid.php?q=1&id=0',
datatype: "json",
colNames:[
'No','Item', 'Qty', 'Unit','Line Total'
],
colModel:[
{name:'num',index:'num', width:},
{name:'item',index:'item', width:},
{name:'qty',index:'qty', width:, align:"right"},
{name:'unit',index:'unit', width:, align:"right"},
{name:'linetotal',index:'linetotal', width:,align:"right", sortable:false, search:false}
],
rowNum:,
rowList:[,,],
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',);
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',,{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:"",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
var su=jQuery("#list5").jqGrid('addRowData',,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:}).trigger("reloadGrid");
});
jQuery("#s5").click( function() {
//设置每页显示15行
jQuery("#list7").jqGrid('setGridParam',{rowNum:}).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',"");
});
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,)
}
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:}).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',"");
});
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:"",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+,mydata[i]);
转自：http://www.2cto.com/kf/201212/177941.html
jqGrid 最常用的属性和事件，供平时参考（转）的更多相关文章
- [转]jqGrid 属性、事件全集
本文转自:http://blog.csdn.net/rosanu_blog/article/details/8334070 以下是jqGrid 最常用的属性和事件,经过一段时间的整理,终于弄的差不多了 ...
- Vue基础知识之常用属性和事件修饰符（二）
Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- TComboBox组件重要属性和事件
TComboBox组件的重要属性 CharCase--------此属性用于设置编辑框内文字的大小写 DropDownCount---此属性用于设置当用户下拉组合框时不需要加滚动条就能显示的项的个数 ...
- combobox 属性、事件、方法
一 .combobox 属性.事件.方法公共属性 名称 说明 AccessibilityObject 获取分配给该控件的 AccessibleObject. AccessibleDefaultActi ...
- HTML5全局属性和事件
全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件. 属性: HTML5属性能够赋给标签元素含义和语 ...
- C#中combobox 控件属性、事件、方法
一 .combobox 属性.事件.方法公共属性 名称 说明 AccessibilityObject 获取分配给该控件的 AccessibleObject. AccessibleDefaultActi ...
- [转]Delphi 控件属性和事件
常用[属性] Action:该属性是与组件关联的行为,允许应用程序集中响应用户命令 Anchors:与组件连接的窗体的位置点 Align:确定组件的对齐方式 AutoSize:确定组件是否自动调整其大 ...
- HTML 5 全局属性和事件属性
1.HTML 5 全局属性 HTML 属性能够赋予元素含义和语境. 下面的全局属性可用于任何 HTML5 元素. NEW:HTML 5 中新的全局属性. 属性 描述 accesskey 规定访问元素的 ...
随机推荐
- input为disabled提交后得不到该值的解决方法
input的字段当为diabled时时无法获取数值得,所以最近不要用这个,我们可以用readonly带替代,即可解决这类问题 放在form表单中提交后得不到该值. 将disabled=”disable ...
- 说说Java生态圈的那些事儿
文章目录: 1.生态圈概述. 2.说说Java,高级Java,Java生态圈的衍生 3. 说说servlet.servlet容器.比较tomcat.jetty.tomcat.jboss: 1. 哪个项 ...
- Markdown生成左边框目录
自从接触了Markdown后就一直用这种语言写学习笔记. 但是一直在纠结如何生成方便的目录. 下面是我搞得一个简单的模板可以生成固定在屏幕左边的目录. 就是这种 第一步,编辑器 首先,需要一个可以自动 ...
- php ci 2.0框架 ORM
很早知道ci出了2.0版本了.这几天正好有项目要用ci开发 虽然项目不大.不过也从开发项目的过程中熟悉了CI框架 因为是个电商项目 本来想用个YII2 的. 封装的虽然厉害不过功能强大 因为另个兄弟坚 ...
- 初识windows程序需要了解的知识点
初识一件事物我们会有陌生,我们慢慢地去了解它就会懂,让我带你们一起了解吧. 一．Form是.Net Framework 定义好的一个最基本的窗体类,具有窗体基本属性和方法 属性 ...
- java集合-Iterator迭代
我们常常使用 JDK 提供的迭代接口进行 Java 集合的迭代. Iterator iterator = list.iterator(); while(iterator.hasNext()){ Str ...
- ZeroClipboard 复制到剪贴板
使用 ZeroClipboard 可以简单的将内容复制到剪贴板,通过 Adobe Flash 和 JavaScript 来实现.“Zero” 意义为这个类库没有界面,界面需要由你来建立. 版本: Ze ...
- 【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼
前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望 ...
- 原生JS：Array对象详解
Array对象 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ ...
- Objective-C instancetype关键字
instancetype是clang 3.5开始,clang提供的一个关键字 表示某个方法返回的未知类型的Objective-C对象 instancetype会告诉编译器当前的类型,这点和NSObj ...