jqgrid学习笔记.docx

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

...