课题jqGrid学习笔记.docx
- 文档编号:26384717
- 上传时间:2023-06-18
- 格式:DOCX
- 页数:21
- 大小:21.79KB
课题jqGrid学习笔记.docx
《课题jqGrid学习笔记.docx》由会员分享,可在线阅读,更多相关《课题jqGrid学习笔记.docx(21页珍藏版)》请在冰豆网上搜索。
课题jqGrid学习笔记
jqGrid学习笔记
一、主要API接口getGridParam、setGridParam:
getGridParam方法:
getGridParam("url"):
获取当前的AJAX的URL
getGridParam("sortname"):
排序的字段
getGridParam("sortorder"):
排序的顺序
getGridParam("selrow"):
得到选中行的ID
getGridParam("page"):
当前的页数
getGridParam("rowNum"):
当前有多少行
getGridParam("datatype"):
得到当前的datatype
getGridParam("records"):
得到总记录数
getGridParam("selarrrow"):
可以多选时,返回选中行的ID
setGridParam方法:
setGridParam({url:
newvalue}):
可以设置一个grid的ajaxurl,可配合trigger("reloadGrid")使用
setGridParam({sortname:
newvalue}):
设置排序的字段
setGridParam({sortorder:
newvalue}):
设置排序的顺序ascordesc
setGridParam({page:
newvalue}):
设置翻到第几页
setGridParam({rowNum:
newvalue}):
设置当前每页显示的行数
setGridParam({datatype:
newvalue}):
设置新的datatype(xml,json)
形式2:
jQuery('#tableID').jqGrid('getGridParam','url'))
jQuery("#tableID").jqGrid('setGridParam',{page:
2}).trigger("reloadGrid")
二、jqGridcolModel表体结构配置
name 必要的属性,具有唯一标识性,如在弹出的editform窗体中,将作为input的name属性
index为排序用,最方便的是设为数据库字段
width150,宽度,数值
alignleft,center,right
detefmtdate:
true
editableflase
editoptionsedittype为先决条件,此为值,[]
editrules编辑规范
edittypetext,textarea,select,checkbox,password
formatoptions
formatter
hidedlgfalse(appearinthemodaldialog)
hiddenfalse在加载时是否隐藏列
jsonmap声明json的格式
keyfalse
label当没有设置colNames时,在列里用此代替,此项也为空时,就是name代替
resizabletrue,列宽可调节
searchtrue,可搜索
sortabletrue,可排序
sorttypetext,int,float,date,排序子段类型
xmlmap声明xml的格式
三、一个例子[ArrayData]
//
jQuery("#list4").jqGrid({
datatype:
"local",
height:
250,
colNames:
['InvNo','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:
false}
],
multiselect:
true,
caption:
"ManipulatingArrayData"
});
varmydata=[
{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(vari=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
四、行操作
//获取选中行数据
jQuery("#a1").click(function(){
varid=jQuery("#list5").jqGrid('getGridParam','selrow');
if(id){
varret=jQuery("#list5").jqGrid('getRowData',id);
alert("id="+ret.id+"invdate="+ret.invdate+"...");
}else{alert("请选择一行!
");}
});
//删除
jQuery("#a2").click(function(){
varsu=jQuery("#list5").jqGrid('delRowData',12);
if(su)alert("成功删除第12行");elsealert("删除失败");
});
//更新
jQuery("#a3").click(function(){
varsu=jQuery("#list5").jqGrid('setRowData',11,{amount:
"333.00",tax:
"33.00",total:
"366.00",note:
"
if(su)alert("更新成功");elsealert("更新失败");
});
//新增
jQuery("#a4").click(function(){
vardatarow={id:
"99",invdate:
"2007-09-01",name:
"test3",note:
"note3",amount:
"400.00",tax:
"30.00",total:
"430.00"};
varsu=jQuery("#list5").jqGrid('addRowData',99,datarow);
if(su)alert("新增成功");elsealert("新增失败");
});
五、进阶
多选
HTML
...
void(0)"id="m1">GetSelectedid's void(0)"id="m1s">Select(Unselect)row13 JavaScrptcode ... jQuery("#list9").jqGrid({ url: 'server.php? q=2&nd='+newDate().getTime(), datatype: "json", colNames: ['InvNo','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: "MultiSelectExample" }); jQuery("#list9").jqGrid('navGrid','#pager9',{add: false,del: false,edit: false,position: 'right'}); jQuery("#m1").click(function(){ vars; s=jQuery("#list9").jqGrid('getGridParam','selarrrow'); alert(s); }); jQuery("#m1s").click(function(){ jQuery("#list9").jqGrid('setSelection',"13"); }); 主从表 HTML ... InvoiceHeader
InvoiceDetail
void(0)"id="ms1">GetSelectedid's JavaScrptcode ... jQuery("#list10").jqGrid({ url: 'server.php? q=2', datatype: "json", colNames: ['InvNo','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: "InvoiceHeader", 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',"InvoiceDetail: "+ids) .trigger('reloadGrid'); } }else{ jQuery("#list10_d").jqGrid('setGridParam',{url: "subgrid.php? q=1&id="+ids,page: 1}); jQuery("#list10_d").jqGrid('setCaption',"InvoiceDetail: "+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','LineTotal'], 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: "InvoiceDetail" }).navGrid('#pager10_d',{add: false,edit: false,del: false}); jQuery("#ms1").click(function(){ vars; s=jQuery("#list10_d").jqGrid('getGridParam','selarrrow'); alert(s); }); 可展开的下级表 HTML ... <
JavaScrptcode
...
jQuery("#list11").jqGrid({
url:
'server.php?
q=1',
datatype:
"xml",
height:
200,
colNames:
['InvNo','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:
'#pager11',
sortname:
'id',
viewrecords:
true,
sortorder:
"desc",
multiselect:
false,
subGrid:
true,
subGridUrl:
'subgrid.php?
q=2',
subGridModel:
[{name:
['No','Item','Qty','Unit','LineTotal'],
width:
[55,200,80,80,80]}
],
caption:
"SubgridExample"
});
jQuery("#list11").jqGrid('navGrid','#pager11',{add:
false,edit:
false,del:
false});
壳展开的下级表2
HTML
...