update YUI to 2.8.0r4
This commit is contained in:
Graham Knop
parent
27f474ec64
commit
2d28e0c0ba
2007 changed files with 344487 additions and 210070 deletions
544
www/extras/yui/examples/datatable/dt_rowexp_basic_clean.html
Normal file
544
www/extras/yui/examples/datatable/dt_rowexp_basic_clean.html
Normal file
|
|
@ -0,0 +1,544 @@
|
|||
<!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>Row Expansion</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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/json/json-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datatable/datatable-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
/* custom styles for this example */
|
||||
#expandable_table{width:500px;}
|
||||
|
||||
/**
|
||||
*
|
||||
* Style the yui-dt-expandablerow-trigger column
|
||||
*
|
||||
**/
|
||||
.yui-dt-expandablerow-trigger{
|
||||
width:18px;
|
||||
height:22px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.yui-dt-expanded .yui-dt-expandablerow-trigger{
|
||||
background:url(../datatable/assets/images/arrow_open.png) 4px 4px no-repeat;
|
||||
}
|
||||
.yui-dt-expandablerow-trigger, .yui-dt-collapsed .yui-dt-expandablerow-trigger{
|
||||
background:url(../datatable/assets/images/arrow_closed.png) 4px 4px no-repeat;
|
||||
}
|
||||
.yui-dt-expanded .yui-dt-expandablerow-trigger.spinner{
|
||||
background:url(../datatable/assets/img/spinner.gif) 1px 4px no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
<cite class="byline">DataTable Row Expansion was developed by <a href='http://standardpixel.com'>Eric Gelinas</a>. This was originally a concept for <a href='http://apt.yahoo.com/'>Yahoo! APT</a> by Ryan Leffel with designs by Edward Zee.</cite>
|
||||
|
||||
<h1>Row Expansion</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<!-- Introductory text -->
|
||||
<p>A demonstration of the DataTable's row expansion feature to display a list of "Interestingness" from <a href="flickr.com">Flickr</a>. When the table first loads, it displays a list of image titles. When a row is expanded the photo is displayed in the expansion area along with a link to the Flickr user's photostream. This example uses a simple string-based template to format the row expansion area.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
|
||||
<div id="expandable_table"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* This code should not be modified */
|
||||
/**********
|
||||
*
|
||||
* Row Expansion Plugin for the YUI DataTable
|
||||
* Author: gelinase@yahoo-inc.com / Eric Gelinas
|
||||
* @submodule Row Expansion
|
||||
* @class YAHOO.widget.DataTable
|
||||
***********/
|
||||
|
||||
(function(){
|
||||
var Dom = YAHOO.util.Dom,
|
||||
STRING_STATENAME = 'yui_dt_state',
|
||||
CLASS_EXPANDED = 'yui-dt-expanded',
|
||||
CLASS_COLLAPSED = 'yui-dt-collapsed',
|
||||
CLASS_EXPANSION = 'yui-dt-expansion',
|
||||
CLASS_LINER = 'yui-dt-liner',
|
||||
|
||||
//From YUI 3
|
||||
indexOf = function(a, val) {
|
||||
for (var i=0; i<a.length; i=i+1) {
|
||||
if (a[i] === val) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
||||
return -1;
|
||||
};
|
||||
|
||||
YAHOO.lang.augmentObject(
|
||||
YAHOO.widget.DataTable.prototype ,
|
||||
{
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// Private members
|
||||
//
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Gets state object for a specific record associated with the DataTable.
|
||||
* @method _getRecordState
|
||||
* @param {Mixed} record_id Record / Row / or Index id
|
||||
* @param {String} key Key to return within the state object. Default is to
|
||||
* return all as a map
|
||||
* @return {Object} State data object
|
||||
* @type mixed
|
||||
* @private
|
||||
**/
|
||||
_getRecordState : function( record_id, key ){
|
||||
|
||||
var row_data = this.getRecord( record_id ),
|
||||
row_state = row_data.getData( STRING_STATENAME ),
|
||||
state_data = ( row_state && key ) ? row_state[ key ] : row_state;
|
||||
|
||||
return state_data || {};
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets a value to a state object with a unique id for a record which
|
||||
* is associated with the DataTable
|
||||
* @method _setRecordState
|
||||
* @param {Mixed} record_id Record / Row / or Index id
|
||||
* @param {String} key Key to use in map
|
||||
* @param {Mixed} value Value to assign to the key
|
||||
* @return {Object} State data object
|
||||
* @type mixed
|
||||
* @private
|
||||
**/
|
||||
_setRecordState : function( record_id, key, value ){
|
||||
|
||||
var row_data = this.getRecord( record_id ).getData(),
|
||||
merged_data = row_data[ STRING_STATENAME ] || {};
|
||||
|
||||
merged_data[ key ] = value;
|
||||
|
||||
this.getRecord( record_id ).setData( STRING_STATENAME, merged_data );
|
||||
|
||||
return merged_data;
|
||||
|
||||
},
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// Public methods
|
||||
//
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* Over-ridden initAttributes method from DataTable
|
||||
* @method initAttributes
|
||||
* @param {Mixed} record_id Record / Row / or Index id
|
||||
* @param {String} key Key to use in map
|
||||
* @param {Mixed} value Value to assign to the key
|
||||
* @return {Object} State data object
|
||||
* @type mixed
|
||||
**/
|
||||
initAttributes : function( oConfigs ) {
|
||||
|
||||
oConfigs = oConfigs || {};
|
||||
|
||||
YAHOO.widget.DataTable.superclass.initAttributes.call( this, oConfigs );
|
||||
|
||||
/**
|
||||
* @attribute rowExpansionTemplate
|
||||
* @description Value for the rowExpansionTemplate attribute.
|
||||
* @type {Mixed}
|
||||
* @default ""
|
||||
**/
|
||||
this.setAttributeConfig("rowExpansionTemplate", {
|
||||
value: "",
|
||||
validator: function( template ){
|
||||
return (
|
||||
YAHOO.lang.isString( template ) ||
|
||||
YAHOO.lang.isFunction( template )
|
||||
);
|
||||
},
|
||||
method: this.initRowExpansion
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Initializes row expansion on the DataTable instance
|
||||
* @method initRowExpansion
|
||||
* @param {Mixed} template a string template or function to be called when
|
||||
* Row is expanded
|
||||
* @type mixed
|
||||
**/
|
||||
initRowExpansion : function( template ){
|
||||
|
||||
//Set subscribe restore method
|
||||
this.subscribe( 'postRenderEvent', this.onEventRestoreRowExpansion );
|
||||
|
||||
//Setup template
|
||||
this.rowExpansionTemplate = template;
|
||||
|
||||
//Set table level state
|
||||
this.a_rowExpansions = [];
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles the expansion state of a row
|
||||
* @method toggleRowExpansion
|
||||
* @param {Mixed} record_id Record / Row / or Index id
|
||||
* @type mixed
|
||||
**/
|
||||
toggleRowExpansion : function( record_id ){
|
||||
|
||||
var state = this._getRecordState( record_id );
|
||||
|
||||
if( state && state.expanded ){
|
||||
|
||||
this.collapseRow( record_id );
|
||||
|
||||
} else {
|
||||
|
||||
this.expandRow( record_id );
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the expansion state of a row to expanded
|
||||
* @method expandRow
|
||||
* @param {Mixed} record_id Record / Row / or Index id
|
||||
* @param {Boolean} restore will restore an exisiting state for a
|
||||
* row that has been collapsed by a non user action
|
||||
* @return {Boolean} successful
|
||||
* @type mixed
|
||||
**/
|
||||
expandRow : function( record_id, restore ){
|
||||
|
||||
var state = this._getRecordState( record_id );
|
||||
|
||||
if( !state.expanded || restore ){
|
||||
|
||||
var row_data = this.getRecord( record_id ),
|
||||
row = this.getRow( row_data ),
|
||||
new_row = document.createElement('tr'),
|
||||
column_length = this.getFirstTrEl().childNodes.length,
|
||||
expanded_data = row_data.getData(),
|
||||
expanded_content = null,
|
||||
template = this.rowExpansionTemplate,
|
||||
next_sibling = Dom.getNextSibling( row );
|
||||
|
||||
//Construct expanded row body
|
||||
new_row.className = CLASS_EXPANSION;
|
||||
var new_column = document.createElement( 'td' );
|
||||
new_column.colSpan = column_length;
|
||||
|
||||
new_column.innerHTML = '<div class="'+ CLASS_LINER +'"></div>';
|
||||
new_row.appendChild( new_column );
|
||||
|
||||
var liner_element = new_row.firstChild.firstChild;
|
||||
|
||||
if( YAHOO.lang.isString( template ) ){
|
||||
|
||||
liner_element.innerHTML = YAHOO.lang.substitute(
|
||||
template,
|
||||
expanded_data
|
||||
);
|
||||
|
||||
} else if( YAHOO.lang.isFunction( template ) ) {
|
||||
|
||||
template( {
|
||||
row_element : new_row,
|
||||
liner_element : liner_element,
|
||||
data : row_data,
|
||||
state : state
|
||||
|
||||
} );
|
||||
|
||||
} else {
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
//Insert new row
|
||||
newRow = Dom.insertAfter( new_row, row );
|
||||
|
||||
if (newRow.innerHTML.length) {
|
||||
|
||||
this._setRecordState( record_id, 'expanded', true );
|
||||
|
||||
if( !restore ){
|
||||
|
||||
this.a_rowExpansions.push( this.getRecord( record_id ).getId() );
|
||||
|
||||
}
|
||||
|
||||
Dom.removeClass( row, CLASS_COLLAPSED );
|
||||
Dom.addClass( row, CLASS_EXPANDED );
|
||||
|
||||
//Fire custom event
|
||||
this.fireEvent( "rowExpandEvent", { record_id : row_data.getId() } );
|
||||
|
||||
return true;
|
||||
|
||||
} else {
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the expansion state of a row to collapsed
|
||||
* @method collapseRow
|
||||
* @param {Mixed} record_id Record / Row / or Index id
|
||||
* @return {Boolean} successful
|
||||
* @type mixed
|
||||
**/
|
||||
collapseRow : function( record_id ){
|
||||
|
||||
var row_data = this.getRecord( record_id ),
|
||||
row = Dom.get( row_data.getId() ),
|
||||
state = row_data.getData( STRING_STATENAME );
|
||||
|
||||
if( state && state.expanded ){
|
||||
|
||||
var next_sibling = Dom.getNextSibling( row ),
|
||||
hash_index = indexOf( this.a_rowExpansions, record_id );
|
||||
|
||||
if( Dom.hasClass( next_sibling, CLASS_EXPANSION ) ) {
|
||||
|
||||
next_sibling.parentNode.removeChild( next_sibling );
|
||||
this.a_rowExpansions.splice( hash_index, 1 );
|
||||
this._setRecordState( record_id, 'expanded', false );
|
||||
|
||||
Dom.addClass( row, CLASS_COLLAPSED );
|
||||
Dom.removeClass( row, CLASS_EXPANDED );
|
||||
|
||||
//Fire custom event
|
||||
this.fireEvent("rowCollapseEvent", { record_id : row_data.getId() } );
|
||||
|
||||
return true;
|
||||
|
||||
} else {
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Collapses all expanded rows. This should be called before any action where
|
||||
* the row expansion markup would interfear with normal DataTable markup handling.
|
||||
* This method does not remove exents attached during implementation. All event
|
||||
* handlers should be removed separately.
|
||||
* @method collapseAllRows
|
||||
* @type mixed
|
||||
**/
|
||||
collapseAllRows : function(){
|
||||
|
||||
var rows = this.a_rowExpansions;
|
||||
|
||||
for( var i = 0, l = rows.length; l > i; i++ ){
|
||||
|
||||
//Always pass 0 since collapseRow removes item from the a_rowExpansions array
|
||||
this.collapseRow( rows[ 0 ] );
|
||||
|
||||
}
|
||||
|
||||
a_rowExpansions = [];
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Restores rows which have an expanded state but no markup. This
|
||||
* is to be called to restore row expansions after the DataTable
|
||||
* renders or the collapseAllRows is called.
|
||||
* @method collapseAllRows
|
||||
* @type mixed
|
||||
**/
|
||||
restoreExpandedRows : function(){
|
||||
|
||||
var expanded_rows = this.a_rowExpansions;
|
||||
|
||||
if( !expanded_rows.length ){
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
if( this.a_rowExpansions.length ){
|
||||
|
||||
for( var i = 0, l = expanded_rows.length; l > i; i++ ){
|
||||
|
||||
this.expandRow( expanded_rows[ i ] , true );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Abstract method which restores row expansion for subscribing to the
|
||||
* DataTable postRenderEvent.
|
||||
* @method onEventRestoreRowExpansion
|
||||
* @param {Object} oArgs context of a subscribed event
|
||||
* @type mixed
|
||||
**/
|
||||
onEventRestoreRowExpansion : function( oArgs ){
|
||||
|
||||
this.restoreExpandedRows();
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Abstract method which toggles row expansion for subscribing to the
|
||||
* DataTable postRenderEvent.
|
||||
* @method onEventToggleRowExpansion
|
||||
* @param {Object} oArgs context of a subscribed event
|
||||
* @type mixed
|
||||
**/
|
||||
onEventToggleRowExpansion : function( oArgs ){
|
||||
|
||||
if( YAHOO.util.Dom.hasClass( oArgs.target, 'yui-dt-expandablerow-trigger' ) ){
|
||||
|
||||
this.toggleRowExpansion( oArgs.target );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}, true //This boolean is needed to override members of the original object
|
||||
);
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* Modify as needed */
|
||||
YAHOO.util.Event.onDOMReady( function() {
|
||||
YAHOO.example.Basic = function() {
|
||||
|
||||
/**
|
||||
*
|
||||
* Create a YUI DataSource instance. This will create an XHR datasource and will use YQL
|
||||
* to query the Flickr web service.
|
||||
*
|
||||
**/
|
||||
var myDataSource = new YAHOO.util.DataSource('assets/php/yql_proxy.php?q=select%20*%20from%20flickr.photos.interestingness(20)&format=json');
|
||||
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
||||
myDataSource.connXhrMode = "queueRequests";
|
||||
myDataSource.responseSchema = {
|
||||
resultsList: "query.results.photo"
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* Create a YUI DataTable instance.
|
||||
*
|
||||
**/
|
||||
var myDataTable = new YAHOO.widget.DataTable(
|
||||
"expandable_table",
|
||||
[
|
||||
{
|
||||
label:"",
|
||||
/**
|
||||
* This formatter adds a class that will be used to style a
|
||||
* trigger in the first column
|
||||
**/
|
||||
formatter:function( el, oRecord, oColumn, oData ) {
|
||||
|
||||
YAHOO.util.Dom.addClass( el.parentNode, "yui-dt-expandablerow-trigger" );
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
key:"title",
|
||||
label:"Interestingness",
|
||||
width : '200px',
|
||||
/**
|
||||
* This formatter includes a default string in cells where the record
|
||||
* is missing a title. This just makes the finsished product look nicer.
|
||||
**/
|
||||
formatter: function( el, oRecord, oColumn, oData ){
|
||||
|
||||
el.innerHTML = oData || '--[ No description ]--';
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
myDataSource,
|
||||
{
|
||||
/**
|
||||
* The "rowExpansionTemplate" property is passed a string. This is passed
|
||||
* through YAHOO.lang.substitute which can match tokens (represented with brackets),
|
||||
* which contain keys from the DataTables data.
|
||||
**/
|
||||
rowExpansionTemplate : '<img src="http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_m_d.jpg" /><div><a href="http://flickr.com/photos/{owner}">See more photos from this Flickr User</a></div>'
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
*
|
||||
* Subscribe to the "cellClickEvent" which will yui-dt-expandablerow-trigger the expansion
|
||||
* when the user clicks on the yui-dt-expandablerow-trigger column
|
||||
*
|
||||
**/
|
||||
myDataTable.subscribe( 'cellClickEvent', myDataTable.onEventToggleRowExpansion );
|
||||
|
||||
return {
|
||||
oDS: myDataSource,
|
||||
oDT: myDataTable
|
||||
};
|
||||
}();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue