jqgrid学习.docx - 冰豆网

资源描述

jqgrid学习.docx

《jqgrid学习.docx》由会员分享，可在线阅读，更多相关《jqgrid学习.docx（18页珍藏版）》请在冰豆网上搜索。

jqgrid学习.docx

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,rightdetefmtdate:

trueeditableflaseeditoptionsedittype为先决条件，此为值，[]editrules编辑规范edittypetext,textarea,select,checkbox,passwordformatoptionsformatterhidedlgfalse（appearinthemodaldialog）hiddenfalse在加载时是否隐藏列jsonmap声明json的格式keyfalselabel当没有设置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