Created
June 14, 2011 04:05
-
-
Save stlsmiths/1024294 to your computer and use it in GitHub Desktop.
YUI 2 DataTable Row Coloring
This file contains hidden or 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> | |
| <style type="text/css"> | |
| /* Define TR styles for each possible color combo */ | |
| .yui-skin-sam .yui-dt tr.Tomato, | |
| .yui-skin-sam .yui-dt tr.Tomato td.yui-dt-asc, | |
| .yui-skin-sam .yui-dt tr.Tomato td.yui-dt-desc { | |
| background-color: #ff6347; | |
| } | |
| .yui-skin-sam .yui-dt tr.Blue, | |
| .yui-skin-sam .yui-dt tr.Blue td.yui-dt-asc, | |
| .yui-skin-sam .yui-dt tr.Blue td.yui-dt-desc { | |
| background-color: #0000ff; | |
| } | |
| .yui-skin-sam .yui-dt tr.Gold, | |
| .yui-skin-sam .yui-dt tr.Gold td.yui-dt-asc, | |
| .yui-skin-sam .yui-dt tr.Gold td.yui-dt-desc { | |
| background-color: #ffd700; | |
| } | |
| .yui-skin-sam .yui-dt tr.PaleGreen, | |
| .yui-skin-sam .yui-dt tr.PaleGreen td.yui-dt-asc, | |
| .yui-skin-sam .yui-dt tr.PaleGreen td.yui-dt-desc { | |
| background-color: #98fb98; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| var loader = new YAHOO.util.YUILoader({ | |
| require: [ 'reset', 'fonts', 'base', "datatable", "datasource", "json", "yahoo", "dom", "event" ], | |
| loadOptional: true, | |
| // The function to call when all script/css resources have been loaded | |
| onSuccess: function() { | |
| YAHOO.util.Event.onDOMReady( function() { | |
| var YDom = YAHOO.util.Dom; | |
| // | |
| // Define some sample data | |
| // | |
| var some_data = { myResults :[ | |
| { color_no : "1", color_code : "#0000ff", cname : "Blue", flag:'off' }, | |
| { color_no : "2", color_code : "#ff6347", cname : "Tomato", flag:'on' }, | |
| { color_no : "13", color_code : "#98fb98", cname : "PaleGreen", flag:'off' }, | |
| { color_no : "4", color_code : "#ffd700", cname : "Gold", flag:'off' } | |
| ] }; | |
| // | |
| // Load the JS array data into DS | |
| // | |
| var myDS = new YAHOO.util.LocalDataSource( some_data.myResults ); | |
| myDS.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; | |
| myDS.responseSchema = { | |
| fields : [ {key:"color_no", parser:"number"}, "color_code", "cname", "flag" ] | |
| }; | |
| // | |
| // Define columns and build table | |
| // | |
| var myCols = [ | |
| { key: "color_no", label: "Id", sortable:true }, | |
| { key: "color_code", label: "Hex Code", sortable:true }, | |
| { key: "cname", label: "CSS Color Name", sortable:true }, | |
| { key: "flag", label:"Toggle Color", | |
| editor:new YAHOO.widget.RadioCellEditor({radioOptions:['off','on'], disableBtns:true}) } | |
| ]; | |
| var myDT = new YAHOO.widget.DataTable( "divTable", myCols, myDS, { | |
| selectionMode : "single" | |
| }); | |
| // | |
| // Enable cell editing on "flag" field to toggle colors | |
| // | |
| myDT.subscribe("cellClickEvent", myDT.onEventShowCellEditor); | |
| // myDT.subscribe("rowClickEvent", myDT.onEventSelectRow); | |
| // | |
| // Coloring work is done here ... | |
| // | |
| myDT.on('postRenderEvent', function() { | |
| var RS = this.getRecordSet(), | |
| len = RS.getLength(), | |
| oRec = null, | |
| i = 0; | |
| for(i=0; i<len; i++) { | |
| oRec = RS.getRecord(i); | |
| if ( oRec.getData('flag') === 'on' ) | |
| YDom.addClass( this.getTrEl(oRec), oRec.getData('cname') ); | |
| else | |
| YDom.removeClass( this.getTrEl(oRec), oRec.getData('cname') ); | |
| } | |
| }); | |
| }); | |
| }, | |
| timeout: 5000, | |
| combine: true | |
| }); | |
| loader.insert(); | |
| </script> | |
| </head> | |
| <body class='yui-skin-sam'> | |
| <h2>YUI DataTable Example - Local JSARRAY data</h2> | |
| <div id="divTable"></div> | |
| <p></p> | |
| <p></p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment