JavaScript DHTML/YUI Library/DataSource

Материал из Web эксперт
Перейти к: навигация, поиск

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">

  1. 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 "
" + img + " " + sResultMatch + "
";
   };
   // 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)

<thead> </thead> <tbody> </tbody>
Table in markup with data in it
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>