JqGrid3.6 CN

Jqgrid ---:
Jqgrid
jqGrid ----------- ...........................................2

jqGrid --------- ..........................................2
jqGrid ................................................................2
jQuery jqGrid ..............4
jqGrid --------------.............................13
jqGrid -------------- ............................15
jqGrid -------------- ....................................16
jqGrid -------------- ..................18
jqGrid -------------- ..................................21
jqGrid -------------- ............................26
jqGrid -------------- 2.............................28
jqGrid -------------- .....................................32
jqGrid -------------- json...............................35
jqGrid -------------- ......................................37
jqGrid ----------- .........................................44
jqGrid ----------- .........................................46
jqGrid -------------- ColModel API
....................54
jqGrid ----------- 2.................................55
Jqgrid ---:
jqGrid ------------------ jqGrid .......................61

jqGrid ----------------- ........................61
jqGrid ......................................67
jqGrid -----------
jqGrid B/S
jqGrid
jqGrid
jqGrid ajax
jqGrid ---------
jqGrid
3.5 jqGrid jquery UI theme
http://jqueryui.com/themeroller/ theme
themejqGrid
css css
ui.theme.css ui.core.css developmentbundle/themes
jqGrid
jqGrid -------------
jqGrid cssjs
*
/myproject/css/
o
ui.jqgrid.css
o
/ui-lightness/
+
/images/
2
Jqgrid ---:
+
jquery-ui-1.7.2.custom.css
*
/myproject/js/
o
/i18n/
+
grid.locale-bg.js
+
list of all language files
+
.
o
Changes.txt
o
jquery-1.3.2.min.js
o
jquery.jqGrid.min.js
Java
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h
2.
3.
4.
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" l
ang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset
=utf-8" />
<title>My First Grid</title>
5.
6.
7. <link rel="stylesheet" type="text/css" media="screen" href="c
ss/ui-lightness/jquery-ui-1.7.1.custom.css" />
8. <link rel="stylesheet" type="text/css" media="screen" href="j
s/src/css/ui.jqgrid.css" />
9. <link rel="stylesheet" type="text/css" media="screen" href="j
s/src/css/jquery.searchFilter.css" />
10.
11. <style>
12. html, body {
13.
margin: 0;
14.
padding: 0;
15.
font-size: 75%;
3
Jqgrid ---:
16. }
17. </style>
18.
19. <script src="js/jquery-1.3.2.min.js" type="text/javascript"></s
cript>
20. <script src="js/src/grid.loader.js" type="text/javascript"></scr
ipt>
21.
22. </head>
23. <body>
24. ...
25. </body>
26. </html>
jquery-ui jqgrid
style
jQuery jqGrid
jqGrid jqGrid
jqGrid
http://a3mao.javaeye.com
jqGrid API
$("#tableId").jqGrid(optional);optional
ajaxGrid obje ajax ajax

4
Jqgrid ---:
Options
ajaxGrid
Options
ajaxSele
ctOption
s
altclass
ct errorcomplete beforeSend
obje ajax
ct
obje ajax select
ct editoptions searchoptions select
Stri css css

ng altRows ture
altRows bool zebra-striped

ean
ui-priority-
secondary
false
false
bool ture url

ean
bool ture false
ean
setGridWidth
caption Stri
ng
autoenc
ode
autowidt
h
cellLayo inte padding + border 5

ut
ger
5paddingLef2+paddingRight2+bord
erLeft1=5
cellEdit bool
false
ean
cellsubm Stri
remote
it
ng remoteclientArray
cellurl
Stri url
ng
colModel arra
a
pi
Jqgrid ---:
y
colName arra colModel
s
y[]
datastr Stri xmlstring jsonstring
ng
datatype stri
xml
ng xmlxmlstringjsonlocalfunction
deselect bool datatype local true
AfterSort ean
direction stri ltr ltr
ng rtr
editurl stri form url
ng
emptyre stri 0
cords
ng viewrecords ture
ExpandC bool true treeGrid true
olClick ean
ExpandC stri tree grid
olumn
ng treeGrid true
footerro bool true
false
w
ean
forceFit bool ture
false
ean shrinkToFit false
gridstate stri 'visible' or 'hidden'
visible
ng
gridview bool grid true false
ean
grid treeGrid, subGrid, or
afterInsertRow
height mix
150
ed
hiddengr bool ture false
id
ean
caption
hidegrid ture
hidegrid bool true
ean caption
hoverro bool false mouse hovering
false
ws
ean
jsonRead arra json
er
y
lastpage inte
0
ger
lastsort inte 0 0
ger
loadonce bool ture false
6
Jqgrid ---:
ean
loadtext stri
Loading....
ng
loadui
stri ajax disable enable
ng ajax enable ajax
block Loading
mtype stri (POST or GET)

GET
ng
multikey stri multiselect ture
ng key shiftKey
altKey ctrlKey
multibox bool multiselect = true.
false
only
ean multiboxonly ture checkbox
multisel bool
false
ect
ean
multisel inte multiselect true multiselect 20
ectWidth ger
page
inte
1
ger
pager
mix html
ed 'pager', '#pager', jQuery('#pager').

'#pager'
pagerpo stri
center
s
ng
pgbutton bool
true
s
ean
pginput bool
true
ean
pgtext stri
ng
prmNam arra Default valuesprmNames:

none
es
y
{page:page,rows:rows, sort:
sidx,order: sord, search:_search,
nd:nd, npage:null} null
postData arra url

array
y
{name1:value1}
reccount inte grid 0
ger records
rowNum=15
20 records 20
reccount 15
15
recordpo stri left, center, right right
7
Jqgrid ---:
s
ng
records inte
none
ger
recordte stri {0} {1}
xt
ng viewrecords ture
0
resizecla stri class
ss
ng
rowList arra []
y[] rowNum
[10,20,30]
rownum bool ture false
bers
ean 1 'rn'.
rowNum inte 20
ger 10
15 10
-1
rownum inte rownumbers true
25
Width
ger column
savedRo arra
w
y
scroll
bool true false
ean
or
inte
ger
scrollOff inte
18
set
ger
scrollrow bool true
false
s
ean
selarrro arra
empty
w
y-[]
array []
selrow stri id
null
ng
shrinkTo bool true
Fit
ean ture
false colModel
sortable bool
false
ean
sortnam stri
e
ng
sortorde stri asc or desc
asc
r
ng
subGrid bool suggrid
false
ean
subGrid arra subgrid
empty
Jqgrid ---:
Model
y-[]
array
subGridT mix dataType
null
ype
ed
subGrid stri subgrid urljqGrid id
Url
ng url
subGrid inte subgrid
20
Width
ger
toolbar arra [false,'']
y
body
layer[true,both]
top,bottom, both.
id t_+ id
tb_+ id
t_+ id
totaltime inte xml 0
ger json
treedata mix datatype null
type
ed
treeGrid bool treegrid
false
ean
treeGrid stri treeGrid
nested
Model
ng
treeIcon arra {plus:'ui-icon-triangles
y
1-e',minus:'ui-icon-triangle-1-s',leaf:'uiicon-radio-off'}
treeRead arra colModel colModel
er
y
tree_root nu root
0
_level
mer
ic
url
stri url
null
ng
userData arra request
empty
y
array
userData bool true userData false
OnFoote ean userData colModel
r
viewreco bool
false
rds
ean
viewsort arra
cols
y
[false,'vertical',true].
false
verticalhorizontal
truefalse
9
Jqgrid ---:
false
ture
width
nu none
mb colModel
er
xmlRead arra xml
er
y
http://a3mao.javaeye.com
xml
xmllocaljsonjsonnpscriptxmlstringjsonstring
clientside
mtype
ajax POST GET GET
colNames
colModel name
index
width align sortable
pager
html
html
rowNum
grid
rowList
rowNum
sortname
viewrecord
s
caption
url
datatype
jQuery extend
10
Jqgrid ---:
Html
2.
3.
4.
5.
ang="en">
<head>
=utf-8" />
6.
7. <link rel="stylesheet" type="text/css" media="screen" href="
css/ui-lightness/jquery-ui-1.7.1.custom.css" />
css/ui.jqgrid.css" />
9.
10. <style>
11. html, body {

12.
margin: 0;
13.
padding: 0;
14.
font-size: 75%;
15. }
16. </style>
17.
18. <script src="js/jquery-1.3.2.min.js" typ
e="text/javascript"></script>
19. <script src="js/i18n/grid.locale-en.js" typ
20. <script src="js/jquery.jqGrid.min.js" type="text/javascript"></
script>
21.
22. <script type="text/javascript">
23. // Here we set a globally the altRows option
24. jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
25. </script>
26.
28. jQuery(document).ready(function(){
29. jQuery("#list").jqGrid({
30.
url:'example.php',
11
Jqgrid ---:
31. ...
Html
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" l
ang="en">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset
=utf-8" />
5. <title>My First Grid</title>
6.
css/ui-lightness/jquery-ui-1.7.1.custom.css" />
css/ui.jqgrid.css" />
9.
10. <style>
11. html, body {
12.
margin: 0;
13.
padding: 0;
14.
font-size: 75%;
15. }
16. </style>
17.
18. <script src="js/jquery-1.3.2.min.js" typ
19. <script src="js/i18n/grid.locale-en.js" typ
script>
21.
23. // Here we set a globally the altRows option
12
Jqgrid ---:
24. jQuery.extend(jQuery.jgrid.defaults, { altRows:true });

25. </script>
26.
28. jQuery(document).ready(function(){
29. jQuery("#list").jqGrid({
30.
url:'example.php',
31.
// here we do not want zebra for this grid
32.
altRows: false,
33. ...
jqGrid --------------
Java
13
Jqgrid ---:
1. <div id="mysearch"></div>
JS
Java
1. jQuery("#mysearch").filterGrid('#grid_id',options);
grid_id: id
options
gridModel ture colModel false

name, index,
edittype, editoptions, search.
defvalsurl
edittype:'select' select url
<select><option value='val1'> Value1
</option><option value='val2'> Value2
</option><option value='valn'> ValueN
</option></select>
gridNames gridModel true
false
filterModel gridModel false
[]
{label:'LableFild', name: 'colname', stype:
'select', defval: 'default_value', surl:
'someurl', sopt:{optins for the
select}} labelname
stypetext selectsurl
select html
<select><option value='val1'> Value1
</option><option value='val2'> Value2
</option><option value='valn'> ValueN
</option></select>sopt editoptions
formtype
'horizontal' or 'vertical' horizontal
autosearch true: select true
formclass
css
filterform
tableclass table css
filtertable
buttonclass css
filterbutton
searchButto
Search
n
clearButton
Clear
enableSearc
false
h
enableClear
false
14
Jqgrid ---:
beforeSearc
h
afterSearch
beforeClear
afterClear
url
marksearch
ed
null
url
true
null
null
null
true
Java
1. var sg = jQuery("#mysearch").filterGrid(...)[0];
2. sg.triggerSearch();
Java
sg.clearSearch();
jqGrid --------------
url
name:value postData
Java
1. ...
2. jQuery("#grid_id").filterToolbar(options);
3. ...
API
Java
1. ...
2. jQuery("#grid_id").jqGrid('filterToolbar',options);
3. ...
grid_id id
options
15
Jqgrid ---:
autosearch boolean text true

select
beforeSearc function
null
h
afterSearch function
null
beforeClear function
null
afterClear function
null
triggerToolbar
clearToolbar
toggleToolbar Toggeles
Java
1. ...
2. var sgrid = $("#grid_id")[0];
3. sgrid.triggerToolbar();
jqGrid --------------
Java
1. $.jgrid = {
2. ...
3. search : {
4.
caption: "Search...",
5.
Find: "Find",
16
Jqgrid ---:
6.
7.
Reset: "Reset",
odata : ['equal', 'not equal', 'less', 'less or equal','greater','gr
eater or equal', 'begins with','does not begin with','is in','is not i
n','ends with','does not end with','contains','does not contain'],
8.
groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any"

} ],
9.
matchText: " match",
10.
rulesText: " rules"
11. },
12. ...
colModel
search
boolea
n
stype
string
searchoption object
s
true
text select text
searchoptions

dataUrl string select
buildSele functi dataUrl function
ct
on
dataInit functi dataInit: function(elem) {do

on
something}. Example:dataInit :
function (elem) {$(elem).datepicker();}
dataEven array dataEvents: [{ type: 'click', data: { i:
ts
7 }, fn: function(e) { console.log(e.data.i); }},{ type:
'keypress', fn: function(e)
{ console.log('keypress'); } }]
attr
object attr : { title: Some title }
searchhi boole
dden
an
true
sopt
array
['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','n
c']['equal','not equal', 'less', 'less or
equal','greater','greater or equal', 'begins with','does
not begin with','is in','is not in','ends with','does not
end with','contains','does not contain']
17
Jqgrid ---:
defaultVa string
lue
value
mixed select string object
string value:label
object editoptions:{value:{1:'One';2:'Two'}}
colModel
Java
1. <script>
2. jQuery("#grid_id").jqGrid({
3. ...
4.
colModel: [
5.
...
6.
{name:'price', index:'price', width:60, search:true, stype:'te
xt', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}}
},
7.
...
8. ]
9. ...
10. });
11. datePick = function(elem)
12. {
13. jQuery(elem).datepicker();
14. }
15. </script>
url
postData array
_search
jqGrid --------------
Java
1. <script>
18
Jqgrid ---:
3. ...
4.
colModel: [
5.
...
6.
{name:'price', index:'price', width:60, align:"center", editabl
e: true, formatter:currencyFmatter},
7.
...
8. ]
9. ...
10. });
11.
12. function currencyFmatter (cellvalue, options, rowObject)
13. {
14. // do something here
15. return new_format_value
16. }
17. </script>
Java
1. function myformatter ( cellvalue, options, rowObject )
2. {
3. // format the cellvalue to new format
4. return new_formated_cellvalue;
5. }
cellvalue
options
{ rowId: rid, colModel: cm}
rowObject
Java
1. <script>
3. ...
4.
colModel: [
5.
...
6.
e: true, formatter:currencyFmatter, unformat:unformatCurrency
},
19
Jqgrid ---:
7.
...
8. ]
9. ...
10. });
11.
12. function currencyFmatter (cellvalue, options, rowObject)
13. {
14.
15. return "$"+cellvalue;
16. }
17. function unformatCurrency (cellvalue, options)
18. {
19.
20. return cellvalue.replace("$","");
21. }
22.
23. </script>
123.00$123.00;
getRowData getCell 123.00
Java
2. jQuery.extend($.fn.fmatter , {
3.
currencyFmatter : function(cellvalue, options, rowdata) {
4.
return "$"+cellvalue;
5. }
6. });
7. jQuery.extend($.fn.fmatter.currencyFmatter , {
8.
unformat : function(cellvalue, options) {
9.
return cellvalue.replace("$","");
10. }
11. });
12.
13. </script>
Java
1. <script>
20
Jqgrid ---:
3. ...
4.
colModel: [
5.
...
6.
e: true, formatter:currencyFmatter},
7.
...
8. ]
9. ...
10. });
jqGrid --------------
jqGrid
Java
1. $jgrid = {
2. ...
3.
formatter : {
4.
integer : {thousandsSeparator: " ", defaultValue: '0'},
5.
number : {decimalSeparator:".", thousandsSeparator: " ", de
cimalPlaces: 2, defaultValue: '0.00'},
6.
currency : {decimalSeparator:".", thousandsSeparator: " ", d
ecimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},
7.
date : {
8.
dayNames: [
9.
"Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",
10.
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursda
y", "Friday", "Saturday"
11.
],
12.
monthNames: [
13.
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep
", "Oct", "Nov", "Dec",
14.
"January", "February", "March", "April", "May", "June", "Jul
y", "August", "September", "October", "November", "December"
15.
16.
],
AmPm : ["am","pm","AM","PM"],
17.
S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th']
[Math.min((j - 1) % 10, 3)] : 'th'},
18.
srcformat: 'Y-m-d',
21
Jqgrid ---:
19.
newformat: 'd/m/Y',
20.
masks : {
21.
ISO8601Long:"Y-m-d H:i:s",
22.
ISO8601Short:"Y-m-d",
23.
ShortDate: "n/j/Y",
24.
LongDate: "l, F d, Y",
25.
FullDateTime: "l, F d, Y g:i:s A",
26.
MonthDay: "F d",
27.
ShortTime: "g:i A",
28.
LongTime: "g:i:s A",
29.
SortableDateTime: "Y-m-d\\TH:i:s",
30.
UniversalSortableDateTime: "Y-m-d H:i:sO",
31.
YearMonth: "F, Y"
32.
},
33.
reformatAfterEdit : false
34.
},
35.
baseLinkUrl: '',
36.
showAction: '',
37.
target: '',
38.
checkbox : {disabled:true},
39.
idName : 'id'
40. }
41. ...
colModel formatoptions
Java
1.
2.
3.
4.
5.
6.
7.
8.
9.
jQuery("#grid_id").jqGrid({
...
colModel : [
...
{name:'myname', ... formatter:'number', ...},
...
],
...
});
mynamenumber
1234.11 234.10
Java
22
Jqgrid ---:
2. ...
3. colModel : [
4.
...
5.
{name:'myname', ... formatter:'currency', formatoptions:
{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces:
2, prefix: "$ "} } ,
6.
...
7. ],
8. ...
9. });

integ thousandsSeparator,defaulValue
er
thousandsSe
parator
defaulValue
numb decimalSeparator,thousandsSeparator,decimalPla
er
ces,defaulValue
curre decimalSeparator,thousandsSeparator,decimalPla number

ncy ces,defaulValue,prefix,suffix
prefix
suffix
date srcformat,newformat
srcformat
newformat
email none
email
mailto:
link target
targer
null
showl baseLinkUrl,showAction,addParam,target,idName baseLinkUrl

ink
23
Jqgrid ---:
showAction
addParam
idName
target
idName
showAction
id
chec disabled
kbox
selec none
t
select
Java
1. <script>
3. ...
4.
colModel : [ {name:'myname', edittype:'select', editoptions:
{value:"1:One;2:Two"}} ... ],
5. ...
6. });
7. </script>
Java
1. <script>
3. ...
4.
colModel : [ {name:'myname', edittype:'select', formatter:'sel
ect', editoptions:{value:"1:One;2:Two"}} ... ]
5. ...
6. });
7. </script>
24
Jqgrid ---:
1 2 One Two
select
Java
1. <script>
3. ...
4.
colModel: [ {name:'myname', edittype:'select', formatter:'sele
ct', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&acti
on=edit'}, ...}
5.
...
6.
]
7. ...
8. });
9. </script>
Java
1. http://localhost/someurl.php?id=123&action=edit
id
Java
1. <script>
3. ...
4.
colModel: [ {name:'myname', edittype:'select', formatter:'sele
ct', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&acti
on=edit', idName:'myid'}, ...}
5.
...
6.
]
7. ...
8. });
9. </script>
Java
1. http://localhost/someurl.php?myid=123&action=edit
25
Jqgrid ---:
jqGrid --------------
Java
1. <script>
2. ...
3. jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager
",{parameters});
4. ...
5. </script>
API
Java
1. <script>
2. ...
3. jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButt
onAdd',"#pager",{parameters});
4. ...
5. </script>
Java
1. { caption:"NewButton", buttonicon:"ui-icon-newwin", onClickBut
ton:null, position: "last", title:"", cursor: "pointer"}
captionstring
buttoniconstring UI theme
onClickButtonfunction null
positionfirst last
titlestring
cursorstring pointer
idstring id
Java
1. ...
26
Jqgrid ---:
2. jQuery("#grid_id")
3. .navGrid('#pager',{edit:false,add:false,del:false,search:false})
4. .navButtonAdd('#pager',{
5.
caption:"Add",
6.
buttonicon:"ui-icon-add",
7. onClickButton: function(){
8.
alert("Adding Row");
9.
},
10. position:"last"
11. })
12. .navButtonAdd('#pager',{
13. caption:"Del",
14. buttonicon:"ui-icon-del",
15. onClickButton: function(){
16.
alert("Deleting Row");
17. },
18. position:"last"
19. });
20. ...
Java
1. <script>
2. ...
3. jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager
",{parameters}).navSeparatorAdd("#pager",
{separator_parameters}};
4. ...
5. </script>
Java
1. {sepclass : ui-separator,sepcontent: ''}
sepclassui-jqgrid
sepcontent
27
Jqgrid ---:
jqGrid -------------- 2
jqGrid
Java
1.
2.
3.
4.
5.
6.
7.
...
<body>
...
<table id="list"></table>
<div id="gridpager"></div>
...
</body>
JS
Java
1. <script>
2. ...
4. ...
5. pager : '#gridpager',
6. ...
7. });
8. jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit,
prmAdd, prmDel, prmSearch, prmView);
9. ...
10. </script>
API
Java
1.
2.
3.
4.
<script>
...
...
5.
pager : '#gridpager',
6. ...
7. });
28
Jqgrid ---:
8. jQuery("#grid_id").jqGrid('navGrid','#gridpager',
{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
9. ...
10. </script>
Java
1.
2.
3.
4.
5.
6.
7.
8.
9.
<script>
...
...
...
}).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmD
el, prmSearch, prmView);
...
</script>
grid_id id
gridpager id
parameters
prmEdit, prmAdd, prmDel, prmSearch, prmView
Java
1. $.jgrid = {
2. ...
3. search : {
4.
caption: "Search...",
5.
Find: "Find",
6.
Reset: "Reset",
7.
odata : ['equal', 'not equal', 'less', 'less or equal','greater','gr
eater or equal', 'begins with','does not begin with','is in','is not i
n','ends with','does not end with','contains','does not contain'],
8.
groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any"

} ],
9.
matchText: " match",
10.
rulesText: " rules"
11. },
29
Jqgrid ---:
12. edit : {
13.
addCaption: "Add Record",
14.
editCaption: "Edit Record",
15.
bSubmit: "Submit",
16.
bCancel: "Cancel",
17.
bClose: "Close",
18.
saveData: "Data has been changed! Save changes?",
19.
bYes : "Yes",
20.
bNo : "No",
21.
bExit : "Cancel",
22. },
23. view : {
24.
caption: "View Record",
25.
bClose: "Close"
26. },
27. del : {
28.
caption: "Delete",
29.
msg: "Delete selected record(s)?",
30.
bSubmit: "Delete",
31.
bCancel: "Cancel"
32. },
33. nav : {
34.
edittext: "",
35.
edittitle: "Edit selected row",
36.
addtext:"",
37.
addtitle: "Add new row",
38.
deltext: "",
39.
deltitle: "Delete selected row",
40.
searchtext: "",
41.
searchtitle: "Find records",
42.
refreshtext: "",
43.
refreshtitle: "Reload Grid",
44.
alertcap: "Warning",
45.
alerttext: "Please, select row",
46.
viewtext: "",
47.
viewtitle: "View selected row"
48. },
49. ...
add
boolean true
editGridRow
30
Jqgrid ---:
UI
ui-icon-plus
theme
addtext
string
addtitle
string
alertcap
string edit,delete or view
alerttext
string edit,delete or view
closeOnEsca boolean esc true

pe
del
boolean true
delGridRow
delicon
string UI
ui-icon-trash
theme
deltext
string
deltitle
string
edit
boolean true
editGridRow
editicon
string UI
ui-icon-pencil
theme
edittext
string
edittitle
string
position
string left,
left
center and right.
refresh
boolean true
trigger(reloadGrid)
refreshicon string UI theme ui-icon-refresh
refreshtext string
refreshtitle string
refreshstate string firstpage firstpage
current
afterRefresh function null

search
boolean
true
searchGrid
searchhicon string UI
ui-icon-search
theme
searchtext
string
searchtitle
string
view
boolean
false
viewGridRow
addicon
string
31
Jqgrid ---:
viewicon
string
viewtext
viewtitle
string
string
UI
ui-icontheme
document
Java
1. <script>
2. ...
4. ...
5. pager : '#gridpager',
6. ...
7. }).navGrid('#gridpager',{view:true, del:false},
8. {}, // use default settings for edit
9. {}, // use default settings for add
10. {}, // delete instead that del:false we need this
11. {multipleSearch : true}, // enable the advanced searching
12. {closeOnEscape:true} /* allow the view dialog to be closed wh
en user press ESC key*/
13. );
14. ...
15. </script>
jqGrid --------------
jqGrid html grid div
Java
1. <body>
2. ...
3.
<table id="list"></table>
4.
<div id="gridpager"></div>
5. ...
6. </body>
js
Java
32
Jqgrid ---:
1.
2.
3.
4.
5.
...
...
});
css jqGrid :pager :

'#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager').
jqGrid
Java
1. $.jgrid = {
2.
defaults : {
3.
recordtext: "View {0} - {1} of {2}",
4.
emptyrecords: "No records to view",
5.
loadtext: "Loading...",
6.
pgtext : "Page {0} of {1}"
7.
},
8. ...
9. }
1
Java
1. jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to
display",...});
2
Java
1.
2.
3.
4.
5.
6.
...
emptyrecords: "Nothing to display",
...
});
33
Jqgrid ---:
lastpage
pager
pagerpos
pgbuttons
pginput
pgtext
reccount
recordpos
records
recordtext
rowList
rowNum
viewrecord
s
integer
0
mixed html
string center
boolea
true
n
boolea
true
n
string
integer
0
records
rowNum=15
20
records=20 reccount=15
15
string left,
right
center, right
integer
none
string viewrecords
true 0
array[]
[10,20,30]
array[]
integer
20
boolea
false
n
NO
NO
NO
NO
NO
YES
NO
NO
NO
yes
no
yes
no
Java
1. <script>
2. ...
3. jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reload
Grid");
4. ...
5. </script>
34
Jqgrid ---:
onPaging

onPagin pgButto
g
n
pgButton
first,last,prev,next
jqGrid -------------- json

IE8FF3 Chrome 3 JSON
Java
2.
3.
4.
ang="en">
<head>
=utf-8" />
5.
6.
ss/ui.jqgrid.css" />
9.
cript>
11. <script src="js/i18n/grid.locale-en.js" type="text/javascript">
</script>
13.
jQuery.jgrid.useJSON = true;
14. </script>
script>
16.
17. </head>
18. <body>
19. ...
20. </body>
21. </html>
35
Jqgrid ---:
Java
2.
jQuery.jgrid.useJSON = true;
3. </script>
jqGrid.js
JSON eval json
jqGrid json JSON.parse
JSON
Java
2.
3.
4.
ang="en">
<head>
=utf-8" />
5.
6.
9.
10. <script src="js/json2.js" type="text/javascript"></script>
cript>
</script>
script>
15. jQuery.extend(jQuery.jgrid,{
16.
parse:function(jsstring) {
17.
return JSON.parse(jsstring);
18.
}
19. });
20. </script>
36
Jqgrid ---:
21.
22.
23.
24.
25.
26.
</head>
<body>
...
</body>
</html>
jqGrid --------------
jqGrid 3.6 jQuery UI
Java
1. <script>
2. ...
3. jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );
4. ...
5. </script>
grid_id: idjqGridMethodparameter1,
parameterN
jqGrid
Java
1. <script>
2. ...
3. jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigg
er("reloadGrid");
4. ...
5. </script>
API
Java
1. <script>
2. ...
37
Jqgrid ---:
3. jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );
4. ...
5. </script>
grid_id: idjqGridmethod
parameter1,...parameterN
Java
1. <script>
2. ...
3. jQuery("#grid_id").jqGrid('setGridParam',
{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");
4. ...
5. </script>
jqGrid api
Java
2.
3.
4.
ang="en">
<head>
=utf-8" />
5.
6.
9.
cript>
</script>
13.
jQuery.jgrid.no_legacy_api = true;
38
Jqgrid ---:
14. </script>
script>
16.
17. </head>
18. <body>
19. ...
20. </body>
21. </html>
Java
2.
jQuery.jgrid.no_legacy_api = true;
3. </script>
jqGrid.js
jqGrid
addJSONData
data
addRowData
rowid,data, rowid
position,
iddata position
srcrowid
true, srcrowid
data
{name1:value1,name2: value2}
false name colModel
data
non var
e
mygrid = jQuery(#+grid_id)[0];
mygrid.addXmlData(xmlresponse.re
sponseXML);
addXMLData
clearGridData
clearfooter
non data
e
var mygrid =
jQuery(#+grid_id)[0];var
myjsongrid =
eval((+jsonresponse.responseText
+));
mygrid.addJSONData(myjsongrid);
myjsongrid = null; jsonresponse
=null;
jqGri
39
Jqgrid ---:
delRowData
footerData
getCell
getCol
getDataIDs
getGridParam
getInd
getRowData
d clearfooter true
rowid
rowid
true
false
action,data, jgGri actionget
format
d setget
get name:valuename
colModel set
namevaluename colModel
format true
true
formatter
rowid, iCol rowidiCol
iCol colModel
name
colname,
arra colname
returntype, y[] colModel name
mathoperati or
returntype
on
valu false false
e
true
{id:rowid,
value:cellvalue} id
idvalue
[{id:1,value:1},{id:2,value:2}
] mathoperation 'sum,
'avg', 'count'
none
arra grid id
y[]
name
mixe
d
valu
e
rowid,rowco mixe rowcontent false
ntent
d
id idrowcontent
false rowconent ture
false
rowid or
arra
none
y{} name:valuename colModel
value
rowid
40
Jqgrid ---:
hideCol
colnameor[c jqGri
olnames]
d
[name1,name2]
remapColumns permutation, non ,permutation
updateCells, e
[1,0,2]
keepHeader
updateCells ture
keepHeader
true header
resetSelection none
jqGri
d
setCaption
caption
jqGri
d
setCell
rowid,colna jqGri rowid id
me, data,
d colname
class,
0 data
properties
class
string addClass
css array
style
properties
setGridParam object
jqGri grid
d grid
setGridHeight new_height jqGri grid

d
new_height
"auto"
setGridWidth new_width,s jqGri new_width:
hrink
d shrinktrue
false shrinkToFit
setLabel
colname,
jqGri
data, class, d colname
properties
0 data
class
string addClass
css array
style properties
label
setRowData
rowid,data, rowid iddata
cssprop
true {name1:value1,name2:
value2} name colModel
false cssprop string
41
Jqgrid ---:
addClass css
array
style
setSelection
rowid,onsele jqGri onselectrow
ctrow
d ture
onSelectRowonselectrow
ture
showCol
colname
jqGri colname
d
[name1,name2], name1
name2 colModel name
trigger(reload none
jqGri
Grid)
d
updateColumns none
non
e
var mygrid=jQuery(#grid_id)
[0];mygrid.updateColumns();
jqGrid
jqGrid
Java
1.
2.
3.
4.
5.
<script>
...
jQuery.jgrid.jqGridFunction( parameter1,...parameterN );
...
</script>
jgrid.jqGridFunction
parameter1,parameterN
ajaxOptions
none
jqgrid
ajax
ajax 3.6
3 ajax
ajax
ajax
jQuery.extend(jQuery.ajax({met
hod specific options},
ajaxOptions,
ThirdLevelajaxSettinds));
42
Jqgrid ---:
jqID
string
jgrid.htmlDecode string
jgrid.htmlEncode string
string
string
string
string
ajax
(\\)
(\)
Example
jQuery.jqgformat(Please enter
a value between {0} and
{1}., 4, result : Please
enter a value between 4 and
8.
jgrid.getCellIndex cell
index
ie7
bug
jgrid.stringToDoc xmlstring xmlDoc
xmlstring dom
jgrid.stripHtml
content new_conte html
nt
jgrid.parse
jsonstring
jsonstring json
jgrid.format
string
jqGrid

filterGri grid_id,param HT jqGrid grid_id: id

d
s
ML params
filterToo params
jqG header
lbar
rid
getColP colname
arra name colModel
rop
y{}
GridDes grid_id
dom grid
troy
tru
e
fals
e
GridUnl grid_id
GridDestroy table pager
oad

tru
e
43
Jqgrid ---:
setGrid
State
setColP
rop
sortGri
d
update
GridRo
ws
fals
e
state
jqG
rid
colname,
jqG
properties
rid
colname,
jqG
reload
rid
data,rowidna
me,jsonreade
r
tru
e
fals
e
grid
onHeaderClick
jQuery(#grid_id).setColProp('colname',
{editoptions:{value:True:False}});
setGridParam({sortname:'myname'}).trigg
er('reloadGrid'). reload true
data
[{name:value,name1:value1},
{name:value,name2:value2}]name
colModel rowidname
jsonreaderboolean false
true data
namevalue value
jqGrid -----------
jqGrid
Java
1. var lastSel;
2. jQuery("#gridid").jqGrid({
3. ...
4.
onSelectRow: function(id){
5.
if(id && id!==lastSel){
6.
jQuery('#gridid').restoreRow(lastSel);
7.
lastSel=id;
8.
}
9.
jQuery('#gridid').editRow(id, true);
10. },
11. ...
12. });
44
Jqgrid ---:
afterInsertRow
rowidrowdatarowelem
rowid
idrowdata
name:
valuename colModel
beforeRequest
none
datatype
function
beforeSelectRow rowid, e
rowid id
e ture
false true
false
gridComplete
none
loadComplete
xhr
xhrXMLHttpRequest
loadError
xhr,status,error
xhrXMLHttpRequest
satus
errorexception
onCellSelect
rowid,iCol,cellcontent,e rowid
idiCol
cellContent
eevent
ondblClickRow
rowid,iRow,iCol,e
rowid
idiRow
iCol
e:event
onHeaderClick
gridstate
/
gridstate
visible or
hidden
onPaging
pgButton
onRightClickRow rowid,iRow,iCol,e
rowid idiRow
iCol
eevent
opera
45
Jqgrid ---:
onSelectAll
aRowids,status
onSelectRow
rowid,status
onSortCol
index,iCol,sortorder
resizeStart
event, index
resizeStop
newwidth, index
serializeGridData postData
multiselect ture
checkbox
aRowids
id
statusboolean
checkbox true
false
checkbox
aRowids

rowid idstatus
multiselect
true
index
name colModel
iCol
sortorderdesc
asc
eventevent
index colModel
newwidth
index colModel
jqGrid -----------
jqGrid xmljsonjsonplocal or
clientSide xmlstringjsonstring
scriptfunction ()
Json
jsonReader
Java
2. ...
3. jsonReader : {
46
Jqgrid ---:
4.
root: "rows",
5.
page: "page",
6.
total: "total",
7.
records: "records",
8.
repeatitems: true,
9.
cell: "cell",
10.
id: "id",
11.
userdata: "userdata",
12.
subgrid: {root:"rows",
13.
repeatitems: true,
14.
cell:"cell"
15.
}
16. },
17. ...
18. });
Java
1. {
2. total: "xxx",
3. page: "yyy",
4. records: "zzz",
5. rows : [
6.
{id:"1", cell:["cell11", "cell12", "cell13"]},
7.
8.
...
9. ]
10. }
jsonReader
total
page
records
rows
id
id
cell
47
Jqgrid ---:
* root
Java
1.
2.
3.
4.
5.
jQuery("#gridid").jqGrid({
...
jsonReader : {root:"invdata"},
...
});
Java
1. {
2. total: "xxx",
3. page: "yyy",
4. records: "zzz",
5. invdata : [
6.
7.
8.
...
9. ]
10. }
* page
* total
* records
Java
2. ...
3. jsonReader : {
4.
root:"invdata",
5.
page: "currpage",
6.
total: "totalpages",
7.
records: "totalrecords"
8. },
9. ...
10. });
48
Jqgrid ---:
Java
1. {
2. totalpages: "xxx",
3. currpage: "yyy",
4. totalrecords: "zzz",
5. invdata : [
6.
7.
8.
...
9. ]
10. }
* cell
Java
2. ...
3. jsonReader : {
4.
root:"invdata",
5.
page: "currpage",
6.
7.
records: "totalrecords",
8.
cell: "invrow"
9.
},
10. ...
11. });
Java
1. {
3. currpage: "yyy",
5. invdata : [
6.
{id:"1", invrow:["cell11", "cell12", "cell13"]},
49
Jqgrid ---:
7.
{id:"2", invrow:["cell21", "cell22", "cell23"]},
8.
...
9. ]
10. }
* id
id
Java
2. ...
3. jsonReader : {
4.
root:"invdata",
5.
page: "currpage",
6.
7.
8.
cell: "invrow",
9.
id: "invid"
10. },
11. ...
12. });
Java
1. {
3. currpage: "yyy",
5. invdata : [
6.
{invid:"1", invrow:["cell11", "cell12", "cell13"]},
7.
{invid:"2", invrow:["cell21", "cell22", "cell23"]},
8.
...
9. ]
10. }
cell id
Java
50
Jqgrid ---:
2. ...
3. jsonReader : {
4.
root:"invdata",
5.
page: "currpage",
6.
7.
8.
cell: "",
9.
id: "0"
10. },
11. ...
12. });
Java
1. {
3. currpage: "yyy",
5. invdata : [
6.
{"1","cell11", "cell12", "cell13"},
7.
{"2",,"cell21", "cell22", "cell23"},
8.
...
9. ]
10. }
* repeatitems
false
colModel
Java
2. ...
3. jsonReader : {
4.
root:"invdata",
5.
page: "currpage",
6.
7.
8.
repeatitems: false,
9.
id: "0"
10. },
51
Jqgrid ---:
11. ...
12. });
Java
1. {
3. currpage: "yyy",
5. invdata : [
6.
{invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", tot
al:"1234", note:"somenote"},
7.
{invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", tot
al:"2345", note:"some note"},
8.
...
9. ]
10. }
id invid
false colModel name
name colModel
Java
1. {
3. currpage: "yyy",
5. invdata : [
6.
{invid:"1",invdate:"cell11", note:"somenote"},
7.
{invid:"2", amount:"cell22", tax:"cell23", total:"2345"},
8.
...
9. ]
10. }
user data
userdata
52
Jqgrid ---:
Java
1. jsonReader: {
2. ...
3. userdata: "userdata",
4. ...
5. }
Java
1. {
2. total: "xxx",
3. page: "yyy",
4. records: "zzz",
5.
userdata: {totalinvoice:240.00, tax:40.00},
6. rows : [
7.
8.
9.
...
10. ]
11. }
Java
1. userData = {totalinvoice:240.00, tax:40.00}
1. getGridParam :
Java
1. jQuery("grid_id").getGridParam('userData')
2. getUserData()
Java
1. jQuery("grid_id").getUserData()
53
Jqgrid ---:
Java
1. jQuery("grid_id").getUserDataItem( key )
jqGrid -------------- ColModel API

ColModel jqGrid
Java
1.
2.
3.
4.
5.
jQuery("#gridid").jqGrid({
...
colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
...
});
string left,
left
center, right.
classes
string css class
empty
'class1 class2' css string
ui-ellipsis
datefmt
string /, -, and . ISO Date
y,Y,yyyy YY, yy (Y-m-d)
m,mm for monthsd,dd .
defval
string
editable
boolean
false
editoptions array
empty
array
editrules
array
empty
array
edittype
string text, textarea, text
select, checkbox, password, button,
image and file.
fixed
boolean
false
formoptions array
form
empty
formatoption array
none
s
formatter
mixed none
align
54
Jqgrid ---:
boolean
false
boolean
false
string empty
sidx
string
jsonmap
string json
none
key
boolean id false
rowid
id
label
string colNames none
name
name
string Required
subgrid,
cb and rn.
resizable
boolean resizable
true
search
boolean true
searchoption array
empty
s
sortable
boolean
true
sorttype
string datatype local text
int/integer - integer
float/number/currency -
date - text -
stype
string
text
surl
string url
empty
string
width
number 150
xmlmap
string xml none
unformat
function unformat
null
hidedlg
hidden
index
name
*
width
*
resizable
*
label (method avail.)
jqGrid ----------- 2
55
Jqgrid ---:
ajaxGrid
Options
ajaxGrid
Options
ajaxSele
ctOption
s
altclass
obje ajax ajax

ct errorcomplete beforeSend
obje ajax
ct
obje ajax select
ct editoptions searchoptions select
Stri css css

ng altRows ture
altRows bool zebra-striped

ean
ui-priority-
secondary
false
false
bool ture url

ean
bool ture false
ean
setGridWidth
caption Stri
ng
autoenc
ode
autowidt
h
cellLayo inte padding + border 5

ut
ger
5paddingLef2+paddingRight2+bord
56
a
pi
Jqgrid ---:
erLeft1=5
cellEdit bool
false
ean
cellsubm Stri
remote
it
ng remoteclientArray
cellurl
Stri url
ng
colModel arra
y
colName arra colModel
s
y[]
datastr Stri xmlstring jsonstring
ng
datatype stri
xml
ng xmlxmlstringjsonlocalfunction
deselect bool datatype local true
AfterSort ean
direction stri ltr ltr
ng rtr
editurl stri form url
ng
emptyre stri 0
cords
ng viewrecords ture
ExpandC bool true treeGrid true
olClick ean
ExpandC stri tree grid
olumn
ng treeGrid true
footerro bool true
false
w
ean
forceFit bool ture
false
ean shrinkToFit false
gridstate stri 'visible' or 'hidden'
visible
ng
gridview bool grid true false
ean
grid treeGrid, subGrid, or
afterInsertRow
height mix
150
ed
hiddengr bool ture false
id
ean
caption
hidegrid ture
hidegrid bool true
ean caption
hoverro bool false mouse hovering
false
57
Jqgrid ---:
ws
ean
jsonRead arra json
er
y
lastpage inte
0
ger
lastsort inte 0 0
ger
loadonce bool ture false
ean
loadtext stri
Loading....
ng
loadui
stri ajax disable enable
ng ajax enable ajax
block Loading
mtype stri (POST or GET)

GET
ng
multikey stri multiselect ture
ng key
shiftKeyaltKeyctrlKey
multibox bool multiselect = true.
false
only
ean multiboxonly ture checkbox
multisel bool
false
ect
ean
multisel inte multiselect true multiselect 20
ectWidth ger
page
inte
1
ger
pager
mix html
ed 'pager', '#pager', jQuery('#pager').

'#pager'
pagerpo stri
center
s
ng
pgbutton bool
true
s
ean
pginput bool
true
ean
pgtext stri
ng
prmNam arra Default valuesprmNames:

none
es
y
{page:page,rows:rows, sort:
sidx,order: sord, search:_search,
nd:nd, npage:null} null
58
Jqgrid ---:
postData arra url

array
y
{name1:value1}
reccount inte grid 0
ger records
rowNum=15
20 records 20
reccount 15
15
recordpo stri left, center, right right
s
ng
records inte
none
ger
recordte stri {0} {1}
xt
ng viewrecords ture
0
resizecla stri class
ss
ng
rowList arra []
y[] rowNum
[10,20,30]
rownum bool ture false
bers
ean 1 'rn'.
rowNum inte 20
ger 10
15 10
-1
rownum inte rownumbers true
25
Width
ger column
savedRo arra
w
y
scroll
bool true false
ean
or
inte
ger
scrollOff inte
18
set
ger
scrollrow bool true
false
s
ean
selarrro arra
empty
w
y-[]
array []
selrow stri id
null
ng
shrinkTo bool true
Fit
ean ture
false colModel
sortable bool
false
59
Jqgrid ---:
ean
sortnam stri
e
ng
sortorde stri asc or desc
asc
r
ng
subGrid bool suggrid
false
ean
subGrid arra subgrid
empty
Model
y-[]
array
subGridT mix dataType
null
ype
ed
subGrid stri subgrid urljqGrid id
Url
ng url
subGrid inte subgrid
20
Width
ger
toolbar arra [false,'']
y
body
layer[true,both]
top,bottom, both.
id t_+ id
tb_+ id
t_+ id
totaltime inte xml 0
ger json
treedata mix datatype null
type
ed
treeGrid bool treegrid
false
ean
treeGrid stri treeGrid
nested
Model
ng
treeIcon arra {plus:'ui-icon-triangles
y
1-e',minus:'ui-icon-triangle-1-s',leaf:'uiicon-radio-off'}
treeRead arra colModel colModel
er
y
tree_root nu root
0
_level
mer
ic
url
stri url
null
ng
userData arra request
empty
y
array
userData bool true userData false
OnFoote ean userData colModel
r
60
Jqgrid ---:
viewreco bool
false
rds
ean
viewsort arra
cols
y
[false,'vertical',true].
false
verticalhorizontal
truefalse
false
ture
width
nu none
mb colModel
er
xmlRead arra xml
er
y
jqGrid ------------------ jqGrid
xml
xmllocaljsonjsonnpscriptxmlstringjsonstring
clientside
mtype
ajax POST GET GET
colNames
colModel name
index
width align sortable
pager
html
html
rowNum
grid
rowList
rowNum
sortname
viewrecord
s
caption
url
datatype
jqGrid -----------------
1html
Java
61
Jqgrid ---:

2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" l
ang="en">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset
=utf-8" />
5. <title>My First Grid</title>
6.
9.
10. <style>
11. html, body {
12.
margin: 0;
13.
padding: 0;
14.
font-size: 75%;
15. }
16. </style>
17.
cript>
</script>
script>
21.
23. $(document).ready(function(){
24. jQuery("#jsonmap").jqGrid({
25.
url:WEB_PATH+'/example/JqGridExample.action',
26.
//url:WEB_PATH+'/excludes/post.jsp',
27.
datatype: 'json',
28.
colNames:['','','','','',''],
29.
colModel:[
30.
{name:'id',index:'id', width:90,sorttype:"int"},
31.
{name:'username',index:'name', width:110,sorttype:"int"}
,
32.
{name:'password',index:'password', width:80},
33.
{name:'age',index:'age', width:80},
34.
{name:'address',index:'address', width:80},
35.
{name:'time',index:'time', width:80,sorttype:"date"}
62
Jqgrid ---:
36.
],
37.
38.
imgpath: WEB_PATH+'/resources/javascript/plugins/jqgrid/c
ss/smoothness/images',
39.
rowNum:10,
40.
rowList:[10,20,30],
41.
pager: "pjmap",
42.
43.
multiselect: false,
44.
sortname: 'id',
45.
viewrecords: true,
46.
sortorder: "desc",
47.
jsonReader: {
48.
root: "dataRows",
49.
repeatitems : false
50.
},
51.
caption: "jqGrid test",
52.
height: 220
53.
}).navGrid('pjmap',
54.
{view:true,edit:true,add:false,del:false},
55.
{closeOnEscape:true}
56.
);
57.
58. });
59. </script>
60.
61. </head>
62. <body>
63. <table id="jsonmap" ></table>
64. <div id="pjmap" ></div>
65.
66. </body>
67. </html>
jqGrid table id
Cellspacingcellpadding border jqGrid
div id
jqGrid
Java
1. jQuery('#grid_selector').jqGrid( options )
63
Jqgrid ---:
grid_selector table id
optoins json
Java
1. {
2.
url:WEB_PATH+'/example/JqGridExample.action',
3.
//url:WEB_PATH+'/excludes/post.jsp',
4.
datatype: 'json',
5.
colNames:['','','','','',''],
6.
colModel:[
7.
{name:'id',index:'id', width:90,sorttype:"int"},
8.
{name:'username',index:'name', width:110,sorttype:"int"}
,
9.
{name:'password',index:'password', width:80},
10.
{name:'age',index:'age', width:80},
11.
{name:'address',index:'address', width:80},
12.
{name:'time',index:'time', width:80,sorttype:"date"}
13.
],
14.
15.
imgpath: WEB_PATH+'/resources/javascript/plugins/jqgrid/c
ss/smoothness/images',
16.
rowNum:10,
17.
rowList:[10,20,30],
18.
pager: "pjmap",
19.
20.
multiselect: false,
21.
sortname: 'id',
22.
viewrecords: true,
23.
sortorder: "desc",
24.
jsonReader: {
25.
root: "dataRows",
26.
repeatitems : false
27.
},
28.
caption: "jqGrid test",
29.
height: 220
30. }
4
Java
64
Jqgrid ---:
1. package com.test.json.action;
2.
3. import java.util.ArrayList;
4. import java.util.HashMap;
5. import java.util.List;
6. import java.util.Map;
7.
8. import org.apache.struts2.json.annotations.JSON;
9.
10. import net.sf.json.JSONArray;
11. import net.sf.json.JSONObject;
12.
13.
14. import com.web.action.BaseAction;
15.
16. public class JqGridAction extends BaseAction
17. {
18.
19.
/**
20.
*
21.
*/
22.
private static final long serialVersionUID = 1L;
23.
24.
25.
private int page = 1;
26.
27.
private int total = 3;
28.
29.
private int rows = 0;
30.
31.
private List dataRows = new ArrayList();
32.
33.
public String execute()
34.
{
35.
JSONArray t_list = new JSONArray();
36.
for(int i=0;i<3;i++){
37.
JSONObject student = new JSONObject();
38.
//Map student = new HashMap();
39.
student.put("username","");
40.
student.put("password","123");
41.
student.put("age",20+i);
42.
student.put("address","USA");
43.
student.put("id",i);
44.
dataRows.add(i,student);
65
Jqgrid ---:
45.
}
46.
47.
//JSONArray ay =JSONArray.fromObject(rows);
48. System.out.println("tttttttttttt======"+t_list.toString());
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
//this.outJsonString(t_list.toString() );
return SUCCESS;
}
//@JSON(serialize=false)
public int getPage()
{
return page;
}
public void setPage(int page)
{
this.page = page;
}
public int getTotal()
{
return total;
}
public void setTotal(int total)
{
this.total = total;
}
public int getRows()
{
return rows;
}
public void setRows(int rows)
{
this.rows = rows;
}
public List getDataRows()
{
66
Jqgrid ---:
88.
89.
90.
91.
92.
93.
94.
95.
96.
97. }
return dataRows;
}
public void setDataRows(List dataRows)
{
this.dataRows = dataRows;
}
json
Java
1. {"dataRows":
[{"password":"123","age":20,"address":"USA","username":"
","id":0},
{"password":"123","age":21,"address":"USA","username":"
","id":1},
{"password":"123","age":22,"address":"USA","username":"
","id":2}],"page":1,"rows":10,"total":3}
11:43
(329)
jqGrid
:Web
jqGrid jqGrid
Cell Editing. jqGrid

wiki jqGrid Demo
67
Jqgrid ---:
Inline Editing jqGrid
Form Editing
68
Jqgrid ---:
jqGrid
jqGrid colModel
editable
true false false
jqGrid true
Cell Editing Inline Editing
Form Editing editoptions
edittype
'text', 'textarea', 'select', 'checkbox', 'password', 'button',
'image', 'file''custom' text
HTML
text editoptions size maxlength
HTML <input type="text" size="10"
maxlength="15"/>
checkbox editoptions value

checked editoptions:{value:"Yes:No"}
checkbox Yes No
select editoptions select

editoptions value
editoption: { value: FE:FedEx; IN:InTime; TN:TNT }
editoptions value
value {} editoptions:{value:
{1:'One',2:'Two'}}
69
Jqgrid ---:
editoptions dataUrl select

URL Ajax
URL select option
HTML <select><option
value="1">One</option><option
value="2">Two</option></select>. editoptions
size
image editoptions src
custom
editoptions custom_element
DOM
Value colModel editoptions
custom_value
<script>
// input
function myelem (value, options) {
var el = document.createElement("input");
el.type="text";
el.value = value;
return el;
}
//
function myvalue(elem) {
return $(elem).val();
}
...
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom',
editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
...
});
</script>
editoptions
editoptions defaultValue
dataEvents
editrules
70
Jqgrid ---:
editrules colModel
editrules:
{edithidden:true, required:true....}
edithidden Form Editing true
required
number true
integer
minValue
maxValue
email
url URL
date
time
custom true js
custom_func
custom_func: value
colModel name
true false[false,Please
enter valid value]
<script>
function mypricecheck(value, colname) {
if (value < 0 && value >20)
return [false,"Please enter value between 0 and 20"];
else
return [true,""];
}
...
colModel: [
...
{name:'price', ..., editrules:{custom:true,
custom_func:mypricecheck....}, editable:true },
...
]
...
});
</script> < function mypricecheck(value, colname) { if (value <
0 && value >20) return [false,"Please enter value between 0 and
20"]; else return [true,""]; } jQuery("#grid_id").jqGrid({ ... colModel:
71
Jqgrid ---:
[ ... {name:'price', ..., editrules:{custom:true,

custom_func:mypricecheck....}, editable:true }, ... ] ... }); // >
formoptions Form Editing
Form
*
elmprefix(
HTML )
elmsuffix(
HTML )
label colNames
rowpos Form again

with the text-label
colpos Form again with
the label
rowpos colpos
Form
rowpos colpos
72

JqGrid3.6 CN

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JqGrid3.6 CN

Uploaded by

Copyright:

Available Formats

Jqgrid ---:

jqGrid ----------- ...........................................2

jqGrid ----------- 2.................................55

jqGrid ------------------ jqGrid .......................61

ajaxGrid obje ajax ajax

Stri css css

altRows bool zebra-striped

bool ture url

cellLayo inte padding + border 5

mtype stri (POST or GET)

ed 'pager', '#pager', jQuery('#pager').

prmNam arra Default valuesprmNames:

postData arra url

11. html, body {

24. jQuery.extend(jQuery.jgrid.defaults, { altRows:true });

gridModel ture colModel false

autosearch boolean text true

groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any"

text select text

dataInit functi dataInit: function(elem) {do

curre decimalSeparator,thousandsSeparator,decimalPla number

showl baseLinkUrl,showAction,addParam,target,idName baseLinkUrl

groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any"

closeOnEsca boolean esc true

refreshicon string UI theme ui-icon-refresh

afterRefresh function null

css jqGrid :pager :

jqGrid -------------- json

setGridHeight new_height jqGri grid

filterGri grid_id,param HT jqGrid grid_id: id

jqGrid -------------- ColModel API

obje ajax ajax

Stri css css

altRows bool zebra-striped

bool ture url

cellLayo inte padding + border 5

mtype stri (POST or GET)

ed 'pager', '#pager', jQuery('#pager').

prmNam arra Default valuesprmNames:

postData arra url

jqGrid ------------------ jqGrid

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h

Cell Editing. jqGrid

Inline Editing jqGrid

checkbox editoptions value

select editoptions select

editoptions dataUrl select

edithidden Form Editing true

[ ... {name:'price', ..., editrules:{custom:true,

rowpos Form again

You might also like