jqGrid方法功能介绍
2014-07-17 14:14:24
阅读5415次
jqGrid方法功能介绍 | |
jqgrid学习笔记Posted on 2010-11-25 00:24 lipan 阅读(...) 评论(...) 编辑 收藏 一、主要API接口getGridParam、setGridParam： getGridParam方法： getGridParam("url")： 获取当前的AJAX的URL setGridParam({url:newvalue})：可以设置一个grid的ajax url，可配合trigger("reloadGrid")使用
形式2：jQuery('#tableID').jqGrid('getGridParam','url')) jQuery("#tableID").jqGrid('setGridParam',{page:2}).trigger("reloadGrid")
二、jqGrid colModel表体结构配置 name 必要的属性，具有唯一标识性，如在弹出的editform窗体中，将作为input的name属性 index 为排序用，最方便的是设为数据库字段 width 150，宽度，数值 align left,center,right detefmt date:true editable flase editoptions edittype为先决条件，此为值，[] editrules 编辑规范 edittype text,textarea,select,checkbox,password formatoptions formatter hidedlg false (appear in the modal dialog) hidden false 在加载时是否隐藏列 jsonmap 声明json的格式 key false label 当没有设置colNames时，在列里用此代替，此项也为空时，就是name代替 resizable true，列宽可调节 search true，可搜索 sortable true，可排序 sorttype text,int,float,date，排序子段类型 xmlmap 声明xml的格式 三、一个例子[Array Data]
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:}
],
multiselect: ,
caption: "Manipulating Array Data"
});
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"}
];
( i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
四、行操作 jQuery("#a1").click( (){
id = jQuery("#list5").jqGrid('getGridParam','selrow');
(id) {
ret = jQuery("#list5").jqGrid('getRowData',id);
alert("id="+ret.id+" invdate="+ret.invdate+"...");
} { alert("请选择一行！");}
});
jQuery("#a2").click( (){
su=jQuery("#list5").jqGrid('delRowData',12);
(su) alert("成功删除第12行"); alert("删除失败");
});
jQuery("#a3").click( (){
su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});
(su) alert("更新成功"); alert("更新失败");
});
jQuery("#a4").click( (){
datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
su=jQuery("#list5").jqGrid('addRowData',99,datarow);
(su) alert("新增成功"); alert("新增失败");
});
五、进阶
HTML
...
<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>
Java Scrpt code
...
jQuery("#list9").jqGrid({
url:'server.php?q=2&nd='+new Date().getTime(),
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{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: '#pager9',
sortname: 'id',
recordpos: 'left',
viewrecords: true,
sortorder: "desc",
multiselect: true,
caption: "Multi Select Example"
});
jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});
jQuery("#m1").click( function() {
var s;
s = jQuery("#list9").jqGrid('getGridParam','selarrrow');
alert(s);
});
jQuery("#m1s").click( function() {
jQuery("#list9").jqGrid('setSelection',"13");
});
HTML
...
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>
Java Scrpt code
...
jQuery("#list10").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{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: '#pager10',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: false,
caption: "Invoice Header",
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');
}
}
});
jQuery("#list10").jqGrid('navGrid','#pager10',{add:false,edit:false,del:false});
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("#ms1").click( function() {
var s;
s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');
alert(s);
});
HTML
...
<<table id="list11"></table>
<div id="pager11"></div>
<script src="subgrid.js" type="text/javascript"> </script>
Java Scrpt code
...
jQuery("#list11").jqGrid({
url:'server.php?q=1',
datatype: "xml",
height: 200,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{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:}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager11',
sortname: 'id',
viewrecords: ,
sortorder: "desc",
multiselect: ,
subGrid : ,
subGridUrl: 'subgrid.php?q=2',
subGridModel: [{ name : ['No','Item','Qty','Unit','Line Total'],
width : [55,200,80,80,80] }
],
caption: "Subgrid Example"
});
jQuery("#list11").jqGrid('navGrid','#pager11',{add:,edit:,del:});
HTML
...
<table id="listsg11"></table>
<div id="pagersg11"></div>
<script src="subgrid_grid.js" type="text/javascript"> </script>
Java Scrpt code
jQuery("#listsg11").jqGrid({
url:'server.php?q=1',
datatype: "xml",
height: 190,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{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:}
],
rowNum:8,
rowList:[8,10,20,30],
pager: '#pagersg11',
sortname: 'id',
viewrecords: ,
sortorder: "desc",
multiselect: ,
subGrid: ,
caption: "Grid as Subgrid",
subGridRowExpanded: (subgrid_id, row_id) {
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:},
{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:}
],
rowNum:20,
pager: pager_id,
sortname: 'num',
sortorder: "asc",
height: '100%'
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:,add:,del:})
},
subGridRowColapsed: (subgrid_id, row_id) {
}
});
jQuery("#listsg11").jqGrid('navGrid','#pagersg11',{add:,edit:,del:});
HTML
...
<table id="list12"></table>
<div id="pager12"></div>
Java Scrpt code
...
jQuery("#list12").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{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:}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager12',
sortname: 'id',
viewrecords: ,
sortorder: "desc",
multiselect: ,
width: 500,
height: "100%",
caption: "Auto height example"
});
jQuery("#list12").jqGrid('navGrid','#pager12',{add:,edit:,del:});
HTML
...
<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>
Java Scrpt code
jQuery("#bigset").jqGrid({
url:'bigset.php',
datatype: "json",
height: 255,
colNames:['Index','Name', 'Code'],
colModel:[
{name:'item_id',index:'item_id', width:65},
{name:'item',index:'item', width:150},
{name:'item_cd',index:'item_cd', width:100}
],
rowNum:12,
mtype: "POST",
pager: jQuery('#pagerb'),
pgbuttons: ,
pgtext: ,
pginput:,
sortname: 'item_id',
viewrecords: ,
sortorder: "asc"
});
timeoutHnd;
flAuto = ;
doSearch(ev){
(!flAuto)
;
(timeoutHnd)
clearTimeout(timeoutHnd)
timeoutHnd = setTimeout(gridReload,500)
}
gridReload(){
nm_mask = jQuery("#item_nm").val();
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");
}
enableAutosubmit(state){
flAuto = state;
jQuery("#submitButton").attr("disabled",state);
}
六、行编辑
HTML
...
<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>
Java Scrpt code
...
jQuery("#rowed1").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:},
{name:'name',index:'name', width:100,editable:},
{name:'amount',index:'amount', width:80, align:"right",editable:},
{name:'tax',index:'tax', width:80, align:"right",editable:},
{name:'total',index:'total', width:80,align:"right",editable:},
{name:'note',index:'note', width:150, sortable:,editable:}
],
rowNum:10,
rowList:[10,20,30],
pager: '#prowed1',
sortname: 'id',
viewrecords: ,
sortorder: "desc",
editurl: "server.php",
caption: "Basic Example"
});
jQuery("#rowed1").jqGrid('navGrid',"#prowed1",{edit:,add:,del:});
jQuery("#ed1").click( () {
jQuery("#rowed1").jqGrid('editRow',"13");
.disabled = 'true';
jQuery("#sved1,#cned1").attr("disabled",);
});
jQuery("#sved1").click( () {
jQuery("#rowed1").jqGrid('saveRow',"13");
jQuery("#sved1,#cned1").attr("disabled",);
jQuery("#ed1").attr("disabled",);
});
jQuery("#cned1").click( () {
jQuery("#rowed1").jqGrid('restoreRow',"13");
jQuery("#sved1,#cned1").attr("disabled",);
jQuery("#ed1").attr("disabled",);
});
HTML
...
<table id="rowed2"></table>
<div id="prowed2"></div>
<br />
<script src="rowedex2.js" type="text/javascript"> </script>
Java Scrpt code
...
jQuery("#rowed2").jqGrid({
url:'server.php?q=3',
datatype: "json",
colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'act',index:'act', width:75,sortable:},
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:},
{name:'name',index:'name', width:100,editable:},
{name:'amount',index:'amount', width:80, align:"right",editable:},
{name:'tax',index:'tax', width:80, align:"right",editable:},
{name:'total',index:'total', width:80,align:"right",editable:},
{name:'note',index:'note', width:150, sortable:,editable:}
],
rowNum:10,
rowList:[10,20,30],
pager: '#prowed2',
sortname: 'id',
viewrecords: ,
sortorder: "desc",
gridComplete: (){
ids = jQuery("#rowed2").jqGrid('getDataIDs');
( i=0;i < ids.length;i++){
cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cl+"');\" />";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\" />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />";
jQuery("#rowed2").jqGrid('setRowData',ids[i],{act:be+se+ce});
}
},
editurl: "server.php",
caption:"Custom edit "
});
jQuery("#rowed2").jqGrid('navGrid',"#prowed2",{edit:,add:,del:});
HTML
...
<table id="rowed3"></table>
<div id="prowed3"></div>
<br />
<script src="rowedex3.js" type="text/javascript"> </script>
Java Scrpt code
...
lastsel;
jQuery("#rowed3").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:},
{name:'name',index:'name', width:100,editable:},
{name:'amount',index:'amount', width:80, align:"right",editable:},
{name:'tax',index:'tax', width:80, align:"right",editable:},
{name:'total',index:'total', width:80,align:"right",editable:},
{name:'note',index:'note', width:150, sortable:,editable:}
],
rowNum:10,
rowList:[10,20,30],
pager: '#prowed3',
sortname: 'id',
viewrecords: ,
sortorder: "desc",
onSelectRow: (id){
(id && id!==lastsel){
jQuery('#rowed3').jqGrid('restoreRow',lastsel);
jQuery('#rowed3').jqGrid('editRow',id,);
lastsel=id;
}
},
editurl: "server.php",
caption: "Using events example"
});
jQuery("#rowed3").jqGrid('navGrid',"#prowed3",{edit:,add:,del:});
HTML
...
<table id="rowed4"></table>
<div id="prowed4"></div>
<br />
<input type="BUTTON" id="ed4" value="Edit row 13" />
<input type="BUTTON" id="sved4" disabled='true' value="Save row 13" />
<script src="rowedex4.js" type="text/javascript"> </script>
Java Scrpt code
...
jQuery("#rowed4").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:},
{name:'name',index:'name', width:100,editable:},
{name:'amount',index:'amount', width:80, align:"right",editable:},
{name:'tax',index:'tax', width:80, align:"right",editable:},
{name:'total',index:'total', width:80,align:"right",editable:},
{name:'note',index:'note', width:150, sortable:,editable:}
],
rowNum:10,
rowList:[10,20,30],
pager: '#prowed4',
sortname: 'id',
viewrecords: ,
sortorder: "desc",
editurl: "server.php",
caption: "Full control"
});
jQuery("#ed4").click( () {
jQuery("#rowed4").jqGrid('editRow',"13");
.disabled = 'true';
jQuery("#sved4").attr("disabled",);
});
jQuery("#sved4").click( () {
jQuery("#rowed4").jqGrid('saveRow',"13", checksave);
jQuery("#sved4").attr("disabled",);
jQuery("#ed4").attr("disabled",);
});
checksave(result) {
(result.responseText=="") {alert("Update is missing!"); ;}
;
}
HTML
...
<table id="rowed5"></table>
Java Scrpt code
lastsel2
jQuery("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: },
{name:'name',index:'name', width:150,editable: ,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: ,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: ,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:,editable: ,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
onSelectRow: (id){
(id && id!==lastsel2){
jQuery('#rowed5').jqGrid('restoreRow',lastsel2);
jQuery('#rowed5').jqGrid('editRow',id,);
lastsel2=id;
}
},
editurl: "server.php",
caption: "Input Types"
});
mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
( i=0;i < mydata2.length;i++)
jQuery("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]); | |
-----------------------------------------------------
转载请注明来源此处
原地址：#
发表