JQGrid数据格式.docx
- 文档编号:10904609
- 上传时间:2023-02-23
- 格式:DOCX
- 页数:47
- 大小:25.07KB
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,
...
...
...
Ifwesettherootelementto“result”alldatawillbeprocessedfromthere.Inthiscase,becauseourrowsaretagged
jQuery("#gridid").jqGrid({
...
xmlReader:
{root:
"result"},
...
});
Thenextelementisthe
rowelement.
Thisdescribestheinformationforparticularrow.Notethatrowmustbeachildoftherootelement.Here,ifthexmllookslikethis,
...
...
...
thesettingtoproperlyinterpretthisdatawouldbe
jQuery("#gridid").jqGrid({
...
xmlReader:
{root:
"result",row:
"invoice"},
...
});
The
page
totaland
records
elementsdescribetheinformationneededforthepager.Theseelementscanbe,butdonothavetobe,achildoftherootelement.Forexample,tointerpretthisdata,
...
...
...
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,
...
...
...
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:
...
...
...
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:
...
...
...
wherethe
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JQGrid 数据格式