JavaScript DHTML/YUI Library/DataSource
Содержание
Custom Formatting, with a Proxyless Remote DataSource
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Custom Formatting, with a Proxyless Remote DataSource</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/autocomplete/assets/skins/sam/autocomplete.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yuiloader-dom-event/yuiloader-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/autocomplete/autocomplete-min.js"></script>
<style type="text/css">
- myAutoComplete {
width:30em; /* set width here or else widget will expand to fit its container */ padding-bottom:2em;
} /* styles for custom formatting */ .yui-ac .result {position:relative;height:62px;} .yui-ac .name {position:absolute;bottom:0;left:64px;} .yui-ac .img {position:absolute;top:0;left:0;width:58px;height:58px;border:1px solid black;background-color:black;color:white;} .yui-ac .imgtext {position:absolute;width:58px;top:50%;text-align:center;} .yui-ac img {width:60px;height:60px;margin-right:4px;} </style>
</head> <body class=" yui-skin-sam">
Custom Formatting, with a Proxyless Remote DataSource
This AutoComplete instance uses a ScriptNodeDataSource to point to the Yahoo! Video Search webservice without a proxy. The generateRequest() method must be customized to comply with the third-party API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.
A custom formatter function is defined in order to show thumbnail images in the results container.
<form action="http://video.search.yahoo.ru/search/video" onsubmit="return YAHOO.example.CustomFormatting.validateForm();">
Yahoo! Video Search:
<input id="myInput" type="text" name="p">
</form> <script type="text/javascript"> YAHOO.example.CustomFormatting = (function(){
// Instantiate DataSource var oDS = new YAHOO.util.ScriptNodeDataSource("http://search.yahooapis.ru/VideoSearchService/V1/videoSearch"); oDS.responseSchema = { resultsList: "ResultSet.Result", fields: ["Title","Thumbnail"] }; // Setting to default value for demonstration purposes. // The webservice needs to support execution of a callback function. oDS.scriptCallbackParam = "callback"; // Instantiate AutoComplete var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS); // The webservice needs custom parameters oAC.generateRequest = function(sQuery) { return "?appid=YahooDemo&output=json&query=" + sQuery ; }; // Result data passed as object for easy access from custom formatter. oAC.resultTypeList = false; // Customize formatter to show thumbnail images oAC.formatResult = function(oResultData, sQuery, sResultMatch) { var img = "", nonimg = ""; var oThumbnail = oResultData.Thumbnail; if(oThumbnail && (oThumbnail !== "")) { img = "<img src=\""+ oThumbnail.Url + "\">"; } else { img = "N/A"; }return "
}; // Stub for form validation var validateForm = function() { // Validation code goes here return true; }; return { oDS: oDS, oAC: oAC, validateForm: validateForm }
})(); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Extracting data from an HTML table
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Extracting data from an HTML table</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script>
<style type="text/css" class="highlight-ignore">
#demo table { border: 1px solid #aaa; border-collapse: collapse; font-size: 80%; } #demo caption { margin-top: 1em; padding: .5ex 0; font-size: 130%; color: #369; } #demo td { border: 1px solid #aaa; padding: .5ex 1ex; } #demo th { background: #ccc; border: 1px solid #aaa; padding: .5ex 1ex; }
</style>
</head> <body class=" yui-skin-sam">
Extracting data from an HTML table
DataSource supports using a table in markup as its source of truth.
This example illustrates how to create a "pass-thru" DataSource instance to leverage the DOM walking and parsing routines inside in order to extract the table"s data into a JavaScript array structure.
<button type="button" id="demo_load">Extract the table data</code></button> <button type="button" id="demo_go" disabled="disabled">Get Total Amount Due</button>
Total Amount Due: (click the Extract button)
Due Date | Account Number | Quantity | Amount Due |
---|---|---|---|
1/23/1999 | 29e8548592d8c82 | 12 | $150.00 |
5/19/1999 | 83849 | 8 | $60.00 |
8/9/1999 | 11348 | 1 | -$34.99 |
1/23/2000 | 29e8548592d8c82 | 10 | -$1.00 |
4/28/2000 | 37892857482836437378273 | 123 | $33.32 |
1/23/2001 | 83849 | 5 | -$15.00 |
9/30/2001 | 224747 | 14 | $56.78 |
<script type="text/javascript"> YAHOO.util.Event.onDOMReady(function () { // Shortcuts var DataSource = YAHOO.util.DataSource,
Event = YAHOO.util.Event, Dom = YAHOO.util.Dom;
YAHOO.example.data = null; // this is where the data will go // Add a new parser to DataSource to parse numbers that are prefixed with // currency symbols (or any other non-numeric characters) DataSource.Parser.currency = function (cur) {
if (YAHOO.lang.isString(cur)) { var neg = !cur.indexOf("-"); cur = (neg?-1:1) * cur.slice(neg).replace(/^[^0-9.]+|,/g,""); } else if (!YAHOO.lang.isNumber(cur)) { return 0; } return cur;
}; Event.on("demo_load","click",function (e) {
// Here"s the pass-thru DataSource. Instantiate and immediately call // sendRequest, passing a simple assignment function as the callback"s // success handler new DataSource(Dom.get("accounts"), { responseType : DataSource.TYPE_HTMLTABLE, responseSchema : { // Describe the object keys each record will have and what type // of data to parse into the respective values fields : [ { key: "due", parser: "date" }, { key: "account" }, { key: "quantity", parser: "number" }, { key: "amount", parser: "currency" } // use our new parser ] } }).sendRequest(null,{ success : function (req,res) { YAHOO.example.data = res.results; } }); YAHOO.log(YAHOO.lang.dump(YAHOO.example.data), "info", "example"); // The work is done and data is populated. Update the UI to allow for // referencing the data structure. Dom.get("demo_load").disabled = true; Dom.get("demo_go").disabled = false; Dom.get("report").innerHTML = "Table data loaded. Click Get Total Amount Due.";
}); Event.on("demo_go","click", function (e) {
var data = YAHOO.example.data || [], total = 0, i; // Proof that we have a populated data object for (i = data.length - 1; i >= 0; --i) { total += data[i].amount; } Dom.get("report").innerHTML = "$" + total.toFixed(2);
}); }); </script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
This DataTable is populated with XML data from a webservice that is held in local memory in the JavaScript variable xmlDoc.
<source lang="html4strict">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Local XML Data</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/datatable/assets/skins/sam/datatable.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datatable/datatable-min.js"></script>
</head> <body class=" yui-skin-sam">
Local XML Data
This DataTable is populated with XML data from a webservice that is held in local memory in the JavaScript variable xmlDoc.
<script type="text/javascript"> YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Local_XML = function() { var myDataSource, myDataTable; var connectionCallback = { success: function(o) { var xmlDoc = o.responseXML; var myColumnDefs = [ {key:"Title", label:"Name", sortable:true, formatter:"link"}, {key:"Phone"}, {key:"City"}, {key:"AverageRating", label:"Rating",formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} ]; myDataSource = new YAHOO.util.DataSource(xmlDoc); myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; myDataSource.responseSchema = { resultNode: "Result", fields: ["Title","Phone","City",{key:"AverageRating",parser:"number"},"ClickUrl"] }; myDataTable = new YAHOO.widget.DataTable("localxml", myColumnDefs, myDataSource); }, failure: function(o) { } }; var getXML = YAHOO.util.Connect.asyncRequest("GET", "yui_2.7.0b-assets/datatable-assets/php/ylocal_proxy.php?query=pizza&zip=94089&results=10", connectionCallback); return { oDS: myDataSource, oDT: myDataTable }; }();
}); </script>
</body>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>