JQGrid数据格式.docx
《JQGrid数据格式.docx》由会员分享，可在线阅读，更多相关《JQGrid数据格式.docx（47页珍藏版）》请在冰豆网上搜索。
JQGrid数据格式
−TableofContents
DataManipulation
XMLData
XMLString
XMLNotesandLimitations
JSONData
JSONString
JSONdotnotation
ArrayData
Function
UserData
Discussion
DataManipulation
WiththefirstreleaseofjqGrid,theonlypossiblewaytoobtaindatawasviaxmlasdescribedinthetutorialabove.Later,manypeoplerequestedtheabilitytoobtaindataviaJSON,thenwithanarrayandfinallywith'real'names.Afterlotofworkandwiththehelpofthecommunitywenowhaveawiderangeofmethodsforobtainingdata.
Therelatedoptions（inoptionsarray）formanipulatingdifferenttypesofdataare:
datatype:
thepossibleoptionsare
xml
json
jsonp
localorclientSide
xmlstring
jsonstring
script
function（…）
Itisveryimportanttoreadthischapter,inordertounderstandhowyoushouldworkwiththedata!
Thedefaultmappingforxmldataisasfollows:
jQuery（"#gridid"）.jqGrid（{
...
xmlReader:
{
root:
"rows",
row:
"row",
page:
"rows>page",
total:
"rows>total",
records:
"rows>records",
repeatitems:
true,
cell:
"cell",
id:
"[id]",
userdata:
"userdata",
subgrid:
{
root:
"rows",
row:
"row",
repeatitems:
true,
cell:
"cell"
}
},
...
}）;
Ifyourservercanprovidedatainthisstructure,youneedtodonothingmore;butifnot,thereisaway（severalways）tohandlethedatayouaregiven.SeeXMLDatabelow.
Thedefaultmappingforjsondataisasfollows:
jQuery（"#gridid"）.jqGrid（{
...
jsonReader:
{
root:
"rows",
page:
"page",
total:
"total",
records:
"records",
repeatitems:
true,
cell:
"cell",
id:
"id",
userdata:
"userdata",
subgrid:
{
root:
"rows",
repeatitems:
true,
cell:
"cell"
}
},
...
}）;
IncolModel,therelatedoptionsarexmlmapforthedescriptionofanxmlfield,andjsonmapforthedescriptionofajsonfield.Forexample:
jQuery（"#gridid"）.jqGrid（{
...
colModel:
[{name:
'amount',...,xmlmap:
'amt'...}...],
...
}）;
willcausejqGridtosearchinthexmldataforan'amt'tag（whentherepeatitemsoptionissettofalse.Seebelow.）.
XMLData
Asmentionedabove,ifwedonotsetthedatatypeandxmlReaderparameterintheoptionsarray,thegridexpectsxmldata,andthestructureofthisdataisasdescribedinourexample.Butwhatifwedonothavethechancetomanipulatetheserverresponse?
ThesolutiontothisproblemisxmlReader,againwithsomeadditionsincolModel.HereisabriefdescriptionofxmlReader.
Importantnote:
therulesofaccessingtheelementfromxmlarethesameasthoseusedinjQuerylibrary,i.e.CSSpatterns.Formoreinformationreferto:
http:
//www.w3.org/TR/REC-CSS2/selector.html
jQuery（"#gridid"）.jqGrid（{
...
xmlReader:
{
root:
"rows",
row:
"row",
page:
"rows>page",
total:
"rows>total",
records:
"rows>records",
repeatitems:
true,
cell:
"cell",
id:
"[id]",
userdata:
"userdata",
subgrid:
{
root:
"rows",
row:
"row",
repeatitems:
true,
cell:
"cell"
}
},
...
}）;
AlltheelementsintheXMLreaderwillbeexplainedasexamplesratherthanasstrongdescription.
rootelement
Thefirstsettingheredefinestherootelement.Thisdescribeswhereourdatabeginsandallotherloopsbeginfromthiselement.Forexample,
...
true
...
|
| data1 |
| data2 |
| data3 |
| data4 |
| data5 |
| data6 |
...
Ifwesettherootelementto“result”alldatawillbeprocessedfromthere.Inthiscase,becauseourrowsaretaggedandourcellstagged| ,allthatisneededistoset |
jQuery（"#gridid"）.jqGrid（{
...
xmlReader:
{root:
"result"},
...
}）;
Thenextelementisthe
rowelement.
Thisdescribestheinformationforparticularrow.Notethatrowmustbeachildoftherootelement.Here,ifthexmllookslikethis,
...
true
...
| data1 |
| data2 |
| data3 |
| data4 |
| data5 |
| data6 |
...
thesettingtoproperlyinterpretthisdatawouldbe
jQuery（"#gridid"）.jqGrid（{
...
xmlReader:
{root:
"result",row:
"invoice"},
...
}）;
The
page
totaland
records
elementsdescribetheinformationneededforthepager.Theseelementscanbe,butdonothavetobe,achildoftherootelement.Forexample,tointerpretthisdata,
...
true
...
1
10
20
| data1 |
| data2 |
| data3 |
| data4 |
| data5 |
| data6 |
...
thexmlReaderwillhavetolooklikethis:
jQuery（"#gridid"）.jqGrid（{
...
xmlReader:
{
root:
"result",
row:
"invoice",
page:
"invoices>currentpage",
total:
"invoices>totalpages",
records:
"invoices>totalrecords"
},
...
}）;
The*repeatitemsand*cellelementstellsjqGridthattheinformationforthedataintherowisrepeatable-i.e.theelementshavethesametagcelldescribedincellelement.Forthisexample,
...
true
...
1
10
20
data1
data2
data3
data4
data5
data6
...
thexmlReaderwilllooklikethis:
jQuery（"#gridid"）.jqGrid（{
...
xmlReader:
{
root:
"result",
row:
"invoice",
page:
"invoices>currentpage",
total:
"invoices>totalpages",
records:
"invoices>totalrecords",
repeatitems:
true,
cell:
"invcell"
},
...
}）;
Nextisthe
id
element.IfrepeatitemsissettotrueandkeyoptionincolModelissettofalsetheid,ifpresentinxmldata,mustbeaattributeoftherowelement.Letslookattheexample:
...
true
...
1
10
20
data1
data2
data3
data4
data5
data6
...
InthiscasethexmlReaderis:
jQuery（"#gridid"）.jqGrid（{
...
xmlReader:
{
root:
"result",
row:
"invoice",
page:
"invoices>currentpage",
total:
"invoices>totalpages",
records:
"invoices>totalrecords",
repeatitems:
true,
cell:
"invcell",
id:
"[asin]"
},
...
}）;
Let'ssupposethatthestructureofthexmldocumentreturnedfromtheserverhasthefollowingformat:
...
true
...
1
10
20
12345
data1
data2
data3
data4
data5
data6
...
wherethetagdescribestheuniqueidandthisshouldbesetastherowidinthegridandnotdisplayedinthegrid.Followingtheruleswecanconstructthefollowing:
jQuery（"#gridid"）.jqGrid（{
...
xmlReader:
{
root:
"result",
row:
"invoice",
page:
"invoices>currentpage",
total:
"invoices>totalpages",
records:
"invoices>totalrecords",
repeatitems:
false,
id:
"asin"
},
...
}）;
andourcolModelfromtheexampleshouldlooklikethis:
jQuery（"#gridid"）.jqGrid（{
...
colModel:
[
{name:
'invid',index:
'invid',width:
55,xmlmap:
"invoiceno"},
{name:
'invdate',index:
'invdate',width:
90,xmlmap:
"invoicedate"},
{name:
'amount',index:
'amount',width:
80,align:
'right',xmlmap:
"invoiceamount"},
{name:
'tax',index:
'tax',width:
80,align:
'right',xmlmap:
"invoicetax"},
{name:
'total',index:
'total',width:
80,align:
'right',xmlmap:
"invoicetotal"},
{name:
'note',index:
'note',width:
150,sortable:
false,xmlmap:
"notes"}
],
xmlReader:
{
root:
"result",
row:
"invoice",
page:
"invoices>currentpage",
total:
"invoices>totalpages",
records:
"invoices>totalrecords",
repeatitems:
false,
id:
"asin"
},
...
}）;
Wecanuseanothertrick.IfthenamesincolModelarenotimportantforyou,youcandothefollowing.
jQuery（"#gridid"）.jqGrid（{
...
colModel:
[
{name:
'invoiceno',index:
'invid',width:
55},
{name:
'invoicedate',index:
'invdate',width:
90},
{name:
'invoiceamount',index:
'amount',width:
80,align:
'right'},
{name:
'invoicetax',index:
'tax',width:
80,align:
'right'},
{name:
'invoicetotal',index:
'total',width:
80,align:
'right'},
{name:
'notes',index:
'note',width:
150,sortable:
false}
],
xmlReader:
{
root:
"result",
row:
"invoice",
page:
"invoices>currentpage",
total:
"invoices>totalpages",
records:
"invoices>totalrecords",
repeatitems:
false,
id:
"asin"
},
...
}）;
Inotherwords,jqGridfirstlookstoseeifthereisanxmlmapoptionavailable;ifthisoptionisnotavailablethenameisusedasthexmlmap.ButallofthisistrueonlyiftherepeatitemselementinxmlReaderissettofalse.
ThesubgridoptionisincludedinseveralofthexmlReaderexamplesabove.Theprinciplesinconstructingtherulesforthisdataarethesameasthosedescribedabove.MoredetailsaboutsubgridscanbefoundinthesectiononSubgrids.
XMLString
Thexmlst
升级会员 