jqGrid 属性、事件全集

野性酷女 2022-04-22 14:14 286阅读 0赞

jqGrid 属性、事件全集  
  
以下是jqGrid 最常用的属性和事件，经过一段时间的整理，终于弄的差不多了。版权所有，转载请注明出处，向您的厚道致敬！谢谢！  
  
<script type="text/javascript">  
var lastsel;  
jQuery().ready(function () \{  
//父Grid（主Grid）  
jQuery("\#list1").jqGrid(\{  
url:'server.php?q=1',  
editurl:"server.php",  
datatype: "json", //数据类型 datatype: "local", datatype: "xml",  
colNames:\['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'\],  
colModel:\[  
\{name:'act',index:'act', width:75,sortable:false\},  
\{name:'id',index:'id', width:75\},  
\{name:'invdate',index:'invdate', width:90\},  
\{name:'name',index:'name', width:100\},  
\{name:'amount',index:'amount', width:80, align:"right"\},  
\{name:'tax',index:'tax', width:80, align:"right"\},  
\{name:'total',index:'total', width:80,align:"right"\},  
\{name:'note',index:'note', width:150, sortable:false\}  
\],  
rowNum:10, //每页数据显示条数  
rowList:\[10,20,30\], //每页数据显示条数  
pager: jQuery('\#pager1'), //Grid显示在id为pager1的div里面  
sortname: 'id', //根据ID排序  
viewrecords: true, //显示数据总记录数  
sortorder: "desc", //倒序  
hidegrid: false, //Grid是否隐藏  
autowidth: true, //自动列宽  
width: 500, //Grid 宽度  
height: 200, //行高 height: "100%",  
multiselect: true, //复选框  
recordpos: 'left', //总记录显示位置：居左  
mtype: "POST",  
pgbuttons: false,  
pgtext: false,  
pginput: false,  
multikey: "ctrlKey",  
onSortCol: function(name,index)\{  
//点击排序列，根据哪列排序  
alert("Column Name: "+name+" Column Index: "+index);  
\},  
ondblClickRow: function(id)\{  
//双击行  
alert("You double click row with id: "+id);  
\},  
onSelectRow: function(ids) \{ //单击选择行  
if(ids == null) \{  
ids=0;  
if(jQuery("\#list10\_d").jqGrid('getGridParam','records') >0 ) \{  
jQuery("\#list10\_d").jqGrid('setGridParam',\{url:"subgrid.php?q=1&id="+ids,page:1\});  
jQuery("\#list10\_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');  
\}  
\} else \{  
jQuery("\#list10\_d").jqGrid('setGridParam',\{url:"subgrid.php?q=1&id="+ids,page:1\});  
jQuery("\#list10\_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');  
\}  
//点击Grid，将行变为编辑状态  
if(id && id!==lastsel)\{  
jQuery('\#rowed3').jqGrid('restoreRow',lastsel);  
jQuery('\#rowed3').jqGrid('editRow',id,true); lastsel=id;  
\}  
\},  
gridComplete: function()\{  
//在Grid的第一列（Actions）中添加按钮E、S、C，添加增、删、查、改按钮；  
var ids = jQuery("\#list1").jqGrid('getDataIDs');  
for(var i=0;i < ids.length;i++)\{  
var cl = ids\[i\];  
be = "<input style='height:22px;width:20px;' type='button' value='E' οnclick=\\"jQuery('\#list1').editRow('"+cl+"');\\" />";  
se = "<input style='height:22px;width:20px;' type='button' value='S' οnclick=\\"jQuery('\#list1').saveRow('"+cl+"');\\" />";  
ce = "<input style='height:22px;width:20px;' type='button' value='C' οnclick=\\"jQuery('\#list1').restoreRow('"+cl+"');\\" />";  
jQuery("\#list1").jqGrid('setRowData',ids\[i\],\{act:be+se+ce\});  
\}  
\},  
subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid  
subGridUrl: 'subgrid.php?q=2', //内部Grid URL  
subGridModel: \[ \{ //内部Grid列  
name : \['No','Item','Qty','Unit','Line Total'\],  
width : \[55,200,80,80,80\],  
params: \['invdate'\] //嵌套Grid参数  
\} \],  
subGridRowExpanded: function(subgrid\_id, row\_id) \{ //Grid内部嵌套Grid  
// we pass two parameters  
// subgrid\_id is a id of the div tag created whitin a table data  
// the id of this elemenet is a combination of the "sg\_" + id of the row  
// the row\_id is the id of the row // If we wan to pass additinal parameters to the url we can use  
// a method getRowData(row\_id) - which returns associative array in type name-value  
// here we can easy construct the flowing  
var subgrid\_table\_id, pager\_id;  
subgrid\_table\_id = subgrid\_id+"\_t";  
pager\_id = "p\_"+subgrid\_table\_id;  
$("\#"+subgrid\_id).html("<table id='"+subgrid\_table\_id+"' class='scroll'></table><div id='"+pager\_id+"' class='scroll'></div>");  
jQuery("\#"+subgrid\_table\_id).jqGrid(\{  
url:"subgrid.php?q=2&id="+row\_id,  
datatype: "xml",  
colNames: \['No','Item','Qty','Unit','Line Total'\],  
colModel: \[  
\{name:"num",index:"num",width:80,key:true\},  
\{name:"item",index:"item",width:130\},  
\{name:"qty",index:"qty",width:70,align:"right"\},  
\{name:"unit",index:"unit",width:70,align:"right"\},  
\{name:"total",index:"total",width:70,align:"right",sortable:false\}  
\],  
rowNum:20,  
pager: pager\_id,  
sortname: 'num',  
sortorder: "asc",  
height: '100%' //自动适应行高  
\});  
jQuery("\#"+subgrid\_table\_id).jqGrid('navGrid',"\#"+pager\_id,\{edit:false,add:false,del:false\});  
\},  
subGridRowColapsed: function(subgrid\_id, row\_id) \{  
// this function is called before removing the data  
//var subgrid\_table\_id;  
//subgrid\_table\_id = subgrid\_id+"\_t";  
//jQuery("\#"+subgrid\_table\_id).remove();  
\},  
loadComplete: function()\{ //加载完成（初始加载），回调函数  
var ret;  
alert("This function is executed immediately after\\n data is loaded. We try to update data in row 13.");  
ret = jQuery("\#list15").jqGrid('getRowData',"13");  
if(ret.id == "13")\{  
jQuery("\#list15").jqGrid('setRowData',ret.id,\{note:"<font color='red'>Row 13 is updated!</font>"\})  
\}  
\},  
caption:"Grid Example" //Grid名称  
\}, \{singleselect: true, lazyload: true\}).navGrid('\#pager1',\{edit:false,add:false,del:false\});  
//singleselect: true 设置jqGrid复选框为单选  
//lazyload: true 设置jqGrid不自动加载  
//jQuery("\#list6").jqGrid('navGrid',"\#pager6",\{edit:false,add:false,del:false\}); = .navGrid('\#pager1',\{edit:false,add:false,del:false\});  
//添加查询文本框  
jQuery("\#list7").jqGrid('navGrid','\#pager7',\{edit:false,add:false,del:false,refresh:false,searchtext:"Find"\});  
//查询和刷新按钮居右  
jQuery("\#list9").jqGrid('navGrid','\#pager9',\{add:false,del:false,edit:false,position:'right'\});  
//编辑行，添加Add、Edit、Save、Cancel按钮 //<script src="rowedex3.js" type="text/javascript"> </script>  
jQuery("\#43rowed3").jqGrid('inlineNav',"\#p43rowed3"); //<table id="rowed3"></table> <div id="prowed3"></div>  
  
//子Grid  
jQuery("\#list10\_d").jqGrid(\{  
height: 100,  
url:'subgrid.php?q=1&id=0',  
datatype: "json",  
colNames:\[  
'No','Item', 'Qty', 'Unit','Line Total'  
\],  
colModel:\[  
\{name:'num',index:'num', width:55\},  
\{name:'item',index:'item', width:180\},  
\{name:'qty',index:'qty', width:80, align:"right"\},  
\{name:'unit',index:'unit', width:80, align:"right"\},  
\{name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false\}  
\],  
rowNum:5,  
rowList:\[5,10,20\],  
pager: '\#pager10\_d',  
sortname: 'item',  
viewrecords: true,  
sortorder: "asc",  
multiselect: true,  
caption:"Invoice Detail"  
\}).navGrid('\#pager10\_d',\{add:false,edit:false,del:false\});  
  
jQuery("\#a1").click( function()\{  
//获取Grid中选中的行id  
var id = jQuery("\#list5").jqGrid('getGridParam','selrow');  
if (id) \{  
var ret = jQuery("\#list5").jqGrid('getRowData',id);  
alert("id="+ret.id+" invdate="+ret.invdate+"...");  
\} else \{  
alert("Please select row");  
\}  
\});  
jQuery("\#a2").click( function()\{  
//删除第12行  
var su=jQuery("\#list5").jqGrid('delRowData',12);  
if(su)  
alert("Succes. Write custom code to delete row from server");  
else  
alert("Allready deleted or not in list");  
\});  
jQuery("\#a3").click( function()\{  
//修改第11行  
var su=jQuery("\#list5").jqGrid('setRowData',11,\{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"\});  
if(su)  
alert("Succes. Write custom code to update row in server");  
else  
alert("Can not update");  
\});  
jQuery("\#a4").click( function()\{  
//添加第99行（id为99的）  
var datarow = \{id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"\};  
var su=jQuery("\#list5").jqGrid('addRowData',99,datarow);  
if(su)  
alert("Succes. Write custom code to add data in server");  
else  
alert("Can not update");  
\});  
  
jQuery("\#s1").click( function() \{  
//设置URL  
jQuery("\#list7").jqGrid('setGridParam',\{url:"server.php?q=2"\}).trigger("reloadGrid");  
\});  
jQuery("\#s2").click( function() \{  
//设置排序列  
jQuery("\#list7").jqGrid('setGridParam',\{sortname:"amount",sortorder:"asc"\}).trigger("reloadGrid");  
\});  
jQuery("\#s3").click( function() \{  
//设置升序或倒序  
var so = jQuery("\#list7").jqGrid('getGridParam','sortorder');  
so = so=="asc"?"desc":"asc";  
jQuery("\#list7").jqGrid('setGridParam',\{sortorder:so\}).trigger("reloadGrid");  
\});  
jQuery("\#s4").click( function() \{  
//跳转到第二页  
jQuery("\#list7").jqGrid('setGridParam',\{page:2\}).trigger("reloadGrid");  
\});  
jQuery("\#s5").click( function() \{  
//设置每页显示15行  
jQuery("\#list7").jqGrid('setGridParam',\{rowNum:15\}).trigger("reloadGrid");  
\});  
jQuery("\#s6").click( function() \{  
//设置URL和数据格式  
jQuery("\#list7").jqGrid('setGridParam',\{url:"server.php?q=1",datatype:"xml"\}).trigger("reloadGrid");  
\});  
jQuery("\#s7").click( function() \{  
//设置Grid的名称  
jQuery("\#list7").jqGrid('setCaption',"New Caption");  
\});  
jQuery("\#s8").click( function() \{  
//设置Grid排序字段，根据名称排序  
jQuery("\#list7").jqGrid('sortGrid',"name",false);  
\});  
jQuery("\#m1").click( function() \{  
//获取复选框被选中的id  
var s = jQuery("\#list9").jqGrid('getGridParam','selarrrow');  
alert(s);  
\});  
jQuery("\#m1s").click( function() \{  
//设置选中第13行  
jQuery("\#list9").jqGrid('setSelection',"13");  
\});  
jQuery("\#ms1").click( function() \{  
var s = jQuery("\#list10\_d").jqGrid('getGridParam','selarrrow');  
alert(s);  
\});  
  
//Grid 查询  
var timeoutHnd;  
var flAuto = false;  
function doSearch(ev)\{  
if(!flAuto)  
return;  
// var elem = ev.target||ev.srcElement;  
if(timeoutHnd)  
clearTimeout(timeoutHnd)  
timeoutHnd = setTimeout(gridReload,500)  
\}  
function gridReload()\{  
var nm\_mask = jQuery("\#item\_nm").val();  
var cd\_mask = jQuery("\#search\_cd").val();  
jQuery("\#bigset").jqGrid('setGridParam',\{url:"bigset.php?nm\_mask="+nm\_mask+"&cd\_mask="+cd\_mask,page:1\}).trigger("reloadGrid");  
\}  
function enableAutosubmit(state)\{  
flAuto = state;  
jQuery("\#submitButton").attr("disabled",state);  
\}  
  
jQuery("\#cm1").click( function() \{  
//显示选中行  
var s;  
s = jQuery("\#list13").jqGrid('getGridParam','selarrrow');  
alert(s);  
\});  
jQuery("\#cm1s").click( function() \{  
//选中编号为13的行  
jQuery("\#list13").jqGrid('setSelection',"13");  
\});  
jQuery("\#list13").jqGrid('navGrid','\#pager13',\{add:false,edit:false,del:false\},  
\{\}, // edit parameters  
\{\}, // add parameters  
\{reloadAfterSubmit:false\} //delete parameters  
);  
  
jQuery("\#sids").click( function() \{  
//获取Grid中当页的所有ID  
alert("Id's of Grid: \\n"+jQuery("\#list15").jqGrid('getDataIDs'));  
\});  
  
jQuery("\#hc").click( function() \{  
//隐藏tax列  
jQuery("\#list17").jqGrid('navGrid','hideCol',"tax");  
\});  
jQuery("\#sc").click( function() \{  
//显示tax列  
jQuery("\#list17").jqGrid('navGrid','showCol',"tax");  
\});  
jQuery("\#ed1").click( function() \{  
//编辑第13行  
jQuery("\#rowed1").jqGrid('editRow',"13");  
this.disabled = 'true';  
jQuery("\#sved1,\#cned1").attr("disabled",false);  
\});  
jQuery("\#sved1").click( function() \{  
//保存第13行  
jQuery("\#rowed1").jqGrid('saveRow',"13");  
jQuery("\#sved1,\#cned1").attr("disabled",true);  
jQuery("\#ed1").attr("disabled",false);  
\});  
jQuery("\#cned1").click( function() \{  
//取消编辑第13行  
jQuery("\#rowed1").jqGrid('restoreRow',"13");  
jQuery("\#sved1,\#cned1").attr("disabled",true);  
jQuery("\#ed1").attr("disabled",false);  
\});  
\})  
</script>  
  
//本地数组数据：datatype: "local",  
var mydata = \[  
\{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"\},  
\{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"\},  
\{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"\},  
\{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"\},  
\{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"\},  
\{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"\},  
\{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"\},  
\{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"\},  
\{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"\}  
\];  
for(var i=0;i<=mydata.length;i++)  
jQuery("\#list4").jqGrid('addRowData',i+1,mydata\[i\]);  
  
  
<html>  
...  
<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 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>  
<div id="pager6"></div> <br />  
<a href="javascript:void(0)" id="g1" οnclick="alert(jQuery('\#list6').jqGrid('getGridParam','url'));">Get url</a>  
<br />  
<a href="javascript:void(0)" id="g2" οnclick="alert(jQuery('\#list6').jqGrid('getGridParam','sortname'));">Get Sort Name</a>  
<br />  
<a href="javascript:void(0)" id="g3" οnclick="alert(jQuery('\#list6')jqGrid('getGridParam','sortorder'));">Get Sort Order</a>  
<br />  
<a href="javascript:void(0)" id="g4" οnclick="alert(jQuery('\#list6')jqGrid('getGridParam','selrow'));">Get Selected Row</a>  
<br />  
<a href="javascript:void(0)" id="g5" οnclick="alert(jQuery('\#list6')jqGrid('getGridParam','page'));">Get Current Page</a>  
<br />  
<a href="javascript:void(0)" id="g6" οnclick="alert(jQuery('\#list6').jqGrid('getGridParam','rowNum'));">Get Number of Rows requested</a>  
<br />  
<a href="javascript:void(0)" id="g7" οnclick="alert('See Multi select rows example');">Get Selected Rows</a>  
<br />  
<a href="javascript:void(0)" id="g8" οnclick="alert(jQuery('\#list6').jqGrid('getGridParam','datatype'));">Get Data Type requested</a>  
<br />  
<a href="javascript:void(0)" id="g9" οnclick="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(15)</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 13</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" οnclick="enableAutosubmit(this.checked)"> Enable Autosearch  
<br/>  
Code  
<br />  
<input type="text" id="search\_cd" οnkeydοwn="doSearch(arguments\[0\]||event)" />  
</div>  
<div> Name<br>  
<input type="text" id="item" οnkeydοwn="doSearch(arguments\[0\]||event)" />  
<button οnclick="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 13</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>  
  
...  
<table id="rowed1"></table>  
<div id="prowed1"></div>  
<br />  
<input type="BUTTON" id="ed1" value="Edit row 13" />  
<input type="BUTTON" id="sved1" disabled='true' value="Save row 13" />  
<input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />  
<script src="rowedex1.js" type="text/javascript"> </script>  
</html>