Created
July 21, 2011 21:43
-
-
Save stlsmiths/1098292 to your computer and use it in GitHub Desktop.
YUI2 DT example with conditional dropdowns
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>YUI DataTable Example</title> | |
| <script src="http://yui.yahooapis.com/2.9.0/build/yuiloader/yuiloader-min.js"></script> | |
| <script type="text/javascript"> | |
| var loader = new YAHOO.util.YUILoader({ | |
| require: [ 'reset', 'fonts', 'base', "datatable", "datasource", "yahoo-dom-event" ], | |
| loadOptional: true, | |
| // The function to call when all script/css resources have been loaded | |
| onSuccess: function() { | |
| // | |
| // Aliases for YUI placeholders | |
| // | |
| var YDom = YAHOO.util.Dom, | |
| YUtil = YAHOO.util, | |
| YEvent = YAHOO.util.Event, | |
| YLang = YAHOO.lang, | |
| YConnect = YUtil.Connect; | |
| YEvent.onDOMReady( function() { | |
| // | |
| // Define an array that contains all of our available inventory | |
| // | |
| var retail = [ | |
| { Frame: "BW1", Image:"bw1.jpg", Desc:'1 1/2" Barnwood .....', | |
| Sizes: [ | |
| { value:1, label:'3 1/2" x 5"', price:13.0}, | |
| { value:2, label:'4" x 6"', price:14.0}, | |
| { value:3, label:'24" x 30"', price:55.0} | |
| ] | |
| }, | |
| { Frame: "BW2", Image:"bw2.jpg", Desc:'2 1/4" Barnwood .....', | |
| Sizes:[ | |
| { value:1, label:'3 1/2" x 5"', price:14.0 }, | |
| { value:2, label:'4" x 6"', price:15.0 }, | |
| { value:3, label:'5" x 7"', price:16.0 }, | |
| { value:4, label:'8" x 10"', price:24.0 } | |
| ] | |
| } | |
| // ... other frame size objects follow here .... | |
| ]; | |
| // | |
| // Now define a "DISPLAY" array, that we will use with DataTable to | |
| // for presentation and price browsing ... | |
| // | |
| // ... this array has only three members; | |
| // frame, image, desc | |
| // | |
| var frameTableData = []; | |
| for(var i=0; i<retail.length; i++) | |
| frameTableData.push( { frame:retail[i].Frame, image:retail[i].Image, desc:retail[i].Desc } ); | |
| // | |
| // Populate the DS | |
| // | |
| var myDS = new YAHOO.util.LocalDataSource( frameTableData, { | |
| responseType : YAHOO.util.DataSource.TYPE_JSARRAY, | |
| responseSchema : { | |
| fields : [ 'frame', 'image', 'desc' ] | |
| } | |
| } ); | |
| //---- | |
| // Custom formatter, to create a "dropdown-like" cell but allowing | |
| // for different "options" based upon the "frame" column setting | |
| //---- | |
| var sizeFormatter = function(el, oRec, oCol, oData) { | |
| var oFrame = oRec.getData('frame'), | |
| opts = []; | |
| // | |
| // find which "frame" is associated with this record, | |
| // and locate it in the "retail" array ... | |
| // | |
| for (var i=0; i<retail.length; i++) | |
| if ( retail[i].Frame === oFrame ) opts = retail[i].Sizes; | |
| // | |
| // if we found the "frame" and we remembered to define .Sizes, | |
| // then simply call YUI's formatDropdown formatter with the proper dropdownOptions | |
| // | |
| if ( opts.length > 0 ) { | |
| oCol.dropdownOptions = [ { value:0, label:'Choose a Size'} ].concat(opts); | |
| YAHOO.widget.DataTable.formatDropdown(el, oRec, oCol, oData); | |
| } else | |
| el.innerHTML = 'unknown'; // only get here if we forgot to define a .Sizes member ... | |
| } | |
| // | |
| // Define the DT columns, using 3 bound fields from RecordSet and 2 dummy columns | |
| // | |
| var myCols = [ | |
| { key:"frame", label:"Frame", sortable:true }, | |
| { key:"image", label:"Image" }, | |
| { key:"desc", label:"Description", sortable:true }, | |
| { key:"size", label:"Sizes", formatter:sizeFormatter, dropdownOptions:[] }, // a dummy column, not connected to the RecordSet | |
| { key:"price", label:"Price" } // another dummy column, not connected to the RecordSet | |
| ]; | |
| var myDT = new YAHOO.widget.DataTable( "divTable", myCols, myDS ); | |
| //---- | |
| // Function that fires on select change, | |
| // updates the 'price' column of the DT after searching the "retail" array ... | |
| //---- | |
| var sizeChanger = function(evt) { | |
| var tar = YEvent.getTarget(evt), | |
| oRec = myDT.getRecord(tar), | |
| oFrame = oRec.getData('frame'), | |
| selIndex = tar.selectedIndex, | |
| selValue = tar.value, | |
| price = null; | |
| // | |
| // Search through and find which 'frame' was set for the target record | |
| // | |
| if ( selIndex !== 0 ) { | |
| for (var i=0; i<retail.length; i++) | |
| if ( retail[i].Frame === oFrame ) price = retail[i].Sizes[ selIndex-1 ].price; | |
| } | |
| var fmt_price = ( price !== null ) ? YAHOO.util.Number.format( price, { prefix:'$ ', decimalPlaces:2 } ) : '' ; | |
| // | |
| // Now update the column 'price' with the selected price ... | |
| // | |
| myDT.updateCell( oRec, myDT.getColumn('price'), fmt_price ); | |
| }; | |
| // | |
| // We can set one listener to detect changes to select's on myDT, | |
| // that will fire the sizeChanger function above | |
| // | |
| YEvent.delegate( myDT.getTbodyEl(), "change", sizeChanger, "select" ); | |
| }); | |
| }, | |
| timeout: 3000, | |
| combine: true | |
| }); | |
| loader.insert(); | |
| </script> | |
| </head> | |
| <body class='yui-skin-sam'> | |
| <h1>YUI DataTable Example - Local JSARRAY data</h1> | |
| <div id="divTable"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment