一、主要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的ajax url，可配合trigger("reloadGrid")使用

　　setGridParam({sortname:newvalue})：设置排序的字段

　　setGridParam({sortorder:newvalue})：设置排序的顺序asc or desc

　　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")

二、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]

//

<table id="list4"></table>

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:

false

}

],

multiselect:

true

,

caption:

"

Manipulating Array Data

"

});

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]);

四、行操作

//

获取选中行数据

jQuery(

"

#a1

"

).click(

function

(){

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(

"

请选择一行！

"

);}

});

//

删除

jQuery(

"

#a2

"

).click(

function

(){

var

su

=

jQuery(

"

#list5

"

).jqGrid(

'

delRowData

'

,

12

);

if

(su) alert(

"

成功删除第12行

"

);

else

alert(

"

删除失败

"

);

});

//

更新

jQuery(

"

#a3

"

).click(

function

(){

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(

"

更新成功

"

);

else

alert(

"

更新失败

"

);

});

//

新增

jQuery(

"

#a4

"

).click(

function

(){

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(

"

新增成功

"

);

else

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:

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

'

,

'

Line Total

'

],

width : [

55

,

200

,

80

,

80

,

80

] }

],

caption:

"

Subgrid Example

"

});

jQuery(

"

#list11

"

).jqGrid(

'

navGrid

'

,

'

#pager11

'

,{add:

false

,edit:

false

,del:

false

});

壳展开的下级表2

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:

false

}

],

rowNum:

8

,

rowList:[

8

,

10

,

20

,

30

],

pager:

'

#pagersg11

'

,

sortname:

'

id

'

,

viewrecords:

true

,

sortorder:

"

desc

"

,

multiselect:

false

,

subGrid:

true

,

caption:

"

Grid as Subgrid

"

,

subGridRowExpanded:

function

(subgrid_id, row_id) {

//

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();

}

});

jQuery(

"

#listsg11

"

).jqGrid(

'

navGrid

'

,

'

#pagersg11

'

,{add:

false

,edit:

false

,del:

false

});

调整大小

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:

false

}

],

rowNum:

10

,

rowList:[

10

,

20

,

30

],

pager:

'

#pager12

'

,

sortname:

'

id

'

,

viewrecords:

true

,

sortorder:

"

desc

"

,

multiselect:

false

,

width:

500

,

height:

"

100%

"

,

caption:

"

Auto height example

"

});

jQuery(

"

#list12

"

).jqGrid(

'

navGrid

'

,

'

#pager12

'

,{add:

false

,edit:

false

,del:

false

});

搜索功能

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

,

//

rowList:[10,20,30],

mtype:

"

POST

"

,

pager: jQuery(

'

#pagerb

'

),

pgbuttons:

false

,

pgtext:

false

,

pginput:

false

,

sortname:

'

item_id

'

,

viewrecords:

true

,

sortorder:

"

asc

"

});

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);

}

六、行编辑

基本例子

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:

true

},

{name:

'

name

'

,index:

'

name

'

, width:

100

,editable:

true

},

{name:

'

amount

'

,index:

'

amount

'

, width:

80

, align:

"

right

"

,editable:

true

},

{name:

'

tax

'

,index:

'

tax

'

, width:

80

, align:

"

right

"

,editable:

true

},

{name:

'

total

'

,index:

'

total

'

, width:

80

,align:

"

right

"

,editable:

true

},

{name:

'

note

'

,index:

'

note

'

, width:

150

, sortable:

false

,editable:

true

}

],

rowNum:

10

,

rowList:[

10

,

20

,

30

],

pager:

'

#prowed1

'

,

sortname:

'

id

'

,

viewrecords:

true

,

sortorder:

"

desc

"

,

editurl:

"

server.php

"

,

caption:

"

Basic Example

"

});

jQuery(

"

#rowed1

"

).jqGrid(

'

navGrid

'

,

"

#prowed1

"

,{edit:

false

,add:

false

,del:

false

});

jQuery(

"

#ed1

"

).click(

function

() {

jQuery(

"

#rowed1

"

).jqGrid(

'

editRow

'

,

"

13

"

);

this

.disabled

=

'

true

'

;

jQuery(

"

#sved1,#cned1

"

).attr(

"

disabled

"

,

false

);

});

jQuery(

"

#sved1

"

).click(

function

() {

jQuery(

"

#rowed1

"

).jqGrid(

'

saveRow

'

,

"

13

"

);

jQuery(

"

#sved1,#cned1

"

).attr(

"

disabled

"

,

true

);

jQuery(

"

#ed1

"

).attr(

"

disabled

"

,

false

);

});

jQuery(

"

#cned1

"

).click(

function

() {

jQuery(

"

#rowed1

"

).jqGrid(

'

restoreRow

'

,

"

13

"

);

jQuery(

"

#sved1,#cned1

"

).attr(

"

disabled

"

,

true

);

jQuery(

"

#ed1

"

).attr(

"

disabled

"

,

false

);

});

客户端编辑

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:

false

},

{name:

'

id

'

,index:

'

id

'

, width:

55

},

{name:

'

invdate

'

,index:

'

invdate

'

, width:

90

, editable:

true

},

{name:

'

name

'

,index:

'

name

'

, width:

100

,editable:

true

},

{name:

'

amount

'

,index:

'

amount

'

, width:

80

, align:

"

right

"

,editable:

true

},

{name:

'

tax

'

,index:

'

tax

'

, width:

80

, align:

"

right

"

,editable:

true

},

{name:

'

total

'

,index:

'

total

'

, width:

80

,align:

"

right

"

,editable:

true

},

{name:

'

note

'

,index:

'

note

'

, width:

150

, sortable:

false

,editable:

true

}

],

rowNum:

10

,

rowList:[

10

,

20

,

30

],

pager:

'

#prowed2

'

,

sortname:

'

id

'

,

viewrecords:

true

,

sortorder:

"

desc

"

,

gridComplete:

function

(){

var

ids

=

jQuery(

"

#rowed2

"

).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(

'

#rowed2

'

).editRow(

'

"+cl+"

'

);\

"

/>

"

;

se

=

"

<input style='height:22px;width:20px;' type='button' value='S' οnclick=\

"

jQuery(

'

#rowed2

'

).saveRow(

'

"+cl+"

'

);\

"

/>

"

;

ce

=

"

<input style='height:22px;width:20px;' type='button' value='C' οnclick=\

"

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:

false

,add:

false

,del:

false

});

使用事件

HTML

...

<

table id

=

"

rowed3

"

><

/

table>

<

div id

=

"

prowed3

"

><

/

div>

<

br

/

>

<

script src

=

"

rowedex3.js

"

type

=

"

text/javascript

"

>

<

/

script>

Java Scrpt code

...

var

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:

true

},

{name:

'

name

'

,index:

'

name

'

, width:

100

,editable:

true

},

{name:

'

amount

'

,index:

'

amount

'

, width:

80

, align:

"

right

"

,editable:

true

},

{name:

'

tax

'

,index:

'

tax

'

, width:

80

, align:

"

right

"

,editable:

true

},

{name:

'

total

'

,index:

'

total

'

, width:

80

,align:

"

right

"

,editable:

true

},

{name:

'

note

'

,index:

'

note

'

, width:

150

, sortable:

false

,editable:

true

}

],

rowNum:

10

,

rowList:[

10

,

20

,

30

],

pager:

'

#prowed3

'

,

sortname:

'

id

'

,

viewrecords:

true

,

sortorder:

"

desc

"

,

onSelectRow:

function

(id){

if

(id

&&

id

!==

lastsel){

jQuery(

'

#rowed3

'

).jqGrid(

'

restoreRow

'

,lastsel);

jQuery(

'

#rowed3

'

).jqGrid(

'

editRow

'

,id,

true

);

lastsel

=

id;

}

},

editurl:

"

server.php

"

,

caption:

"

Using events example

"

});

jQuery(

"

#rowed3

"

).jqGrid(

'

navGrid

'

,

"

#prowed3

"

,{edit:

false

,add:

false

,del:

false

});

完全控制

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:

true

},

{name:

'

name

'

,index:

'

name

'

, width:

100

,editable:

true

},

{name:

'

amount

'

,index:

'

amount

'

, width:

80

, align:

"

right

"

,editable:

true

},

{name:

'

tax

'

,index:

'

tax

'

, width:

80

, align:

"

right

"

,editable:

true

},

{name:

'

total

'

,index:

'

total

'

, width:

80

,align:

"

right

"

,editable:

true

},

{name:

'

note

'

,index:

'

note

'

, width:

150

, sortable:

false

,editable:

true

}

],

rowNum:

10

,

rowList:[

10

,

20

,

30

],

pager:

'

#prowed4

'

,

sortname:

'

id

'

,

viewrecords:

true

,

sortorder:

"

desc

"

,

editurl:

"

server.php

"

,

caption:

"

Full control

"

});

jQuery(

"

#ed4

"

).click(

function

() {

jQuery(

"

#rowed4

"

).jqGrid(

'

editRow

'

,

"

13

"

);

this

.disabled

=

'

true

'

;

jQuery(

"

#sved4

"

).attr(

"

disabled

"

,

false

);

});

jQuery(

"

#sved4

"

).click(

function

() {

jQuery(

"

#rowed4

"

).jqGrid(

'

saveRow

'

,

"

13

"

, checksave);

jQuery(

"

#sved4

"

).attr(

"

disabled

"

,

true

);

jQuery(

"

#ed4

"

).attr(

"

disabled

"

,

false

);

});

function

checksave(result) {

if

(result.responseText

==

""

) {alert(

"

Update is missing!

"

);

return

false

;}

return

true

;

}

输入类型

HTML

...

<

table id

=

"

rowed5

"

><

/

table>

Java Scrpt code

var

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:

true

},

{name:

'

name

'

,index:

'

name

'

, width:

150

,editable:

true

,editoptions:{size:

"

20

"

,maxlength:

"

30

"

}},

{name:

'

stock

'

,index:

'

stock

'

, width:

60

, editable:

true

,edittype:

"

checkbox

"

,editoptions: {value:

"

Yes:No

"

}},

{name:

'

ship

'

,index:

'

ship

'

, width:

90

, editable:

true

,edittype:

"

select

"

,editoptions:{value:

"

FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX

"

}},

{name:

'

note

'

,index:

'

note

'

, width:

200

, sortable:

false

,editable:

true

,edittype:

"

textarea

"

, editoptions:{rows:

"

2

"

,cols:

"

10

"

}}

],

onSelectRow:

function

(id){

if

(id

&&

id

!==

lastsel2){

jQuery(

'

#rowed5

'

).jqGrid(

'

restoreRow

'

,lastsel2);

jQuery(

'

#rowed5

'

).jqGrid(

'

editRow

'

,id,

true

);

lastsel2

=

id;

}

},

editurl:

"

server.php

"

,

caption:

"

Input Types

"

});

var

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

"

}

];

for

(

var

i

=

0

;i

<

mydata2.length;i

++

)

jQuery(

"

#rowed5

"

).jqGrid(

'

addRowData

'

,mydata2[i].id,mydata2[i]);