This DataTable is populated with XML data where the schema is defined using XPath-syntax locators. Please note that namespace support is not implemented at this time.
Please note: XML is not currently supported on Android devices.
type | rank | subnameatt | age | name |
---|---|---|---|---|
Loading... |
When working with XML data, use the DataSource's useXPath
property to enable XPath syntax in your locator strings.
Data:
1 | <myroot rootatt='5'> |
2 | <top>topvalue</top> |
3 | <second nested='nestedsecond' /> |
4 | <allitems> |
5 | <livehere> |
6 | <item type='foo'> |
7 | <name type='nametype0'>Abc</name> |
8 | <rank>0</rank> |
9 | <subitem> |
10 | <name type='subnametype0'>subABC</name> |
11 | <age>10</age> |
12 | </subitem> |
13 | </item> |
14 | <item type='bar'> |
15 | <name type='nametype1'>Def</name> |
16 | <rank>1</rank> |
17 | <subitem> |
18 | <name type='subnametype1'>subDEF</name> |
19 | <age>11</age> |
20 | </subitem> |
21 | </item> |
22 | <item type='bat'> |
23 | <name type='nametype2'>Ghi</name> |
24 | <rank>2</rank> |
25 | <subitem> |
26 | <name type='subnametype2'>subGHI</name> |
27 | <age>12</age> |
28 | </subitem> |
29 | </item> |
30 | </livehere> |
31 | </allitems> |
32 | </myroot> |
view plain | print | ? |
CSS:
1 | /* No custom CSS. */ |
view plain | print | ? |
Markup:
1 | <div id="xpath"></div> |
view plain | print | ? |
JavaScript:
1 | YAHOO.util.Event.addListener(window, "load", function() { |
2 | YAHOO.example.XPath = function() { |
3 | var myColumnDefs = [ |
4 | {key:"type"}, |
5 | {key:"rank"}, |
6 | {key:"subnameatt"}, |
7 | {key:"age"}, |
8 | {key:"name"} |
9 | ]; |
10 | |
11 | var myDataSource = new YAHOO.util.DataSource("assets/php/xml_proxy.php"); |
12 | myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; |
13 | myDataSource.useXPath = true; |
14 | myDataSource.responseSchema = { |
15 | metaFields: {rootatt:"/myroot/@rootatt", topnode:"//top", nestedatt:"//second/@nested"}, |
16 | resultNode: "item", |
17 | fields: [{key:"type", locator:"@type"}, {key:"rank", parser:"number"}, "name", {key:"subnameatt", locator:"subitem/name/@type"}, {key:"age", locator:"subitem/age", parser:"number"}] |
18 | }; |
19 | |
20 | var myDataTable = new YAHOO.widget.DataTable("xpath", myColumnDefs, myDataSource); |
21 | |
22 | return { |
23 | oDS: myDataSource, |
24 | oDT: myDataTable |
25 | }; |
26 | }(); |
27 | }); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings