dataschema-table.mustache revision 819e90d415ed17d59af3a247b2ad9d6feb0c21b5
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore<div class="intro">
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore <p>DataSchema.XML can be used to retrieve data held in HTML TABLE elements.</p>
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore</div>
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore<div class="example yui3-skin-sam">
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore {{>dataschema-table-source}}
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore</div>
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore<p>DataSource.XML's `apply()` method supports passing in DOM nodes or document fragments. Use XPath strings to define data locations. In this example, we are retrieving data held in the rows of a TABLE element.</p>
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore```
02fc09f797e83e80199c96adc4751c230dccc973Adam MooreYUI().use("dataschema-xml", function(Y) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var tableEl = Y.Node.getDOMNode(Y.one("#simple")),
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore schema = {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // Each record is held in a TR
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore resultListLocator: "tr",
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // Note that the XPath indexes are 1-based!
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore resultFields: [
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore {key:"beverage", locator:"td[1]"},
c4f19796d319a7ec9a1e76d48adc82c9c5ae2f27Adam Moore {key:"price", locator:"td[2]"}
08e054017132cdd838955bc0af15889f1f2a7b42Adam Moore ]
b46f3d670b654847b0ce60afdba1b461c492a5c9Adam Moore },
b46f3d670b654847b0ce60afdba1b461c492a5c9Adam Moore data_out = Y.DataSchema.XML.apply(schema, tableEl));
b46f3d670b654847b0ce60afdba1b461c492a5c9Adam Moore
08e054017132cdd838955bc0af15889f1f2a7b42Adam Moore alert(data_out);
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore});
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore```
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore<p>If the table has a THEAD element and/or multiple TBODY elements, special considerations must be taken to apply the schema to the appropriate collection of TR elements. In the following complex example we leverage the power of the Node API to</p>
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore<ul>
9c42541e375e7bb70c53012b3012d70f1a380254Adam Moore <li>Access the contents of the THEAD to generate our schema dynamically;</li>
9c42541e375e7bb70c53012b3012d70f1a380254Adam Moore <li>and access only the TR elements contained in TBODY elements for data values, ignoring those TR elements in the THEAD.</li>
9c42541e375e7bb70c53012b3012d70f1a380254Adam Moore</ul>
9c42541e375e7bb70c53012b3012d70f1a380254Adam Moore
9c42541e375e7bb70c53012b3012d70f1a380254Adam Moore```
9c42541e375e7bb70c53012b3012d70f1a380254Adam MooreYUI().use("dataschema-xml", function(Y) {
9c42541e375e7bb70c53012b3012d70f1a380254Adam Moore // This function generates a schema based on contents of a TABLE element
02fc09f797e83e80199c96adc4751c230dccc973Adam Moore var getSchemaFromTableNode = function(tableNode) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var fields = [],
2690c090ce850e485d15cf691f59e8aaeb3b4bb1Adam Moore // Each record is held in a TR
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore schema = {resultListLocator:"tr"},
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore // Each field name is held in a TH
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore thList = tableNode.all("th");
abdfe7cf11d34f89f17b26e4779bf6079d22a910Adam Moore
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // Generate field definitions based on TH
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore thList.each(function(thNode, i){
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // Note that the XPath indexes are 1-based!
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore fields.push({key:thNode.get("text"), locator:"td["+(i+1)+"]"});
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore });
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore schema.resultFields = fields;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore return schema;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore };
2690c090ce850e485d15cf691f59e8aaeb3b4bb1Adam Moore
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var tableNode = Y.one("#complex"),
2690c090ce850e485d15cf691f59e8aaeb3b4bb1Adam Moore // Generate schema dynamically
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore schema = getSchemaFromTableNode(tableNode),
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // Create a temporary TBODY container to hold all data TRs
abdfe7cf11d34f89f17b26e4779bf6079d22a910Adam Moore tbody = document.createElement("tbody"),
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore tbodyContainer = document.createDocumentFragment().appendChild(tbody);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // Grab each TR in a TBODY but don't include TRs from the THEAD
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.all("#complex tbody tr").each(function(trNode, i){
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // Cloning the TR keeps it in the document (optional)
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // Append each TR to the container
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore tbodyContainer.appendChild(Y.Node.getDOMNode(trNode).cloneNode(true));
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore })
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var data_out = Y.DataSchema.XML.apply(schema, tbodyContainer));
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore alert(data_out);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore});
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore```
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore