sandbox/rowexpansion/rowexp_basic_examples/dt_rowexp_basic_customheader.php sandbox/rowexpansion/rowexp_basic_examples/dt_rowexp_basic_description.php sandbox/rowexpansion/rowexp_basic_examples/dt_rowexp_basic_intro.php sandbox/rowexpansion/rowexp_basic_examples/dt_rowexp_basic_source.php @@ -5,398 +5,398 @@ * @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; - }; - - /** - * The RowExpansionDataTable class extends the DataTable class to provide - * functionality for expanding rows to show more contextual data. - * - * @namespace YAHOO.widget - * @class RowExpansionDataTable - * @extends YAHOO.widget.DataTable - * @constructor - * @param elContainer {HTMLElement} Container element for the TABLE. - * @param aColumnDefs {Object[]} Array of object literal Column definitions. - * @param oDataSource {YAHOO.util.DataSource} DataSource instance. - * @param oConfigs {object} (optional) Object literal of configuration values. - */ - YAHOO.widget.RowExpansionDataTable = function(elContainer,aColumnDefs,oDataSource,oConfigs) { - oConfigs = oConfigs || {}; - - YAHOO.widget.RowExpansionDataTable.superclass.constructor.call(this, elContainer,aColumnDefs,oDataSource,oConfigs); - - }; - - YAHOO.lang.extend( - YAHOO.widget.RowExpansionDataTable, - YAHOO.widget.DataTable, - { - - ///////////////////////////////////////////////////////////////////////////// - // - // 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.RowExpansionDataTable.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; + 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; + }; + + /** + * The RowExpansionDataTable class extends the DataTable class to provide + * functionality for expanding rows to show more contextual data. + * + * @namespace YAHOO.widget + * @class RowExpansionDataTable + * @extends YAHOO.widget.DataTable + * @constructor + * @param elContainer {HTMLElement} Container element for the TABLE. + * @param aColumnDefs {Object[]} Array of object literal Column definitions. + * @param oDataSource {YAHOO.util.DataSource} DataSource instance. + * @param oConfigs {object} (optional) Object literal of configuration values. + */ + YAHOO.widget.RowExpansionDataTable = function(elContainer,aColumnDefs,oDataSource,oConfigs) { + oConfigs = oConfigs || {}; + + YAHOO.widget.RowExpansionDataTable.superclass.constructor.call(this, elContainer,aColumnDefs,oDataSource,oConfigs); + + }; + + YAHOO.lang.extend( + YAHOO.widget.RowExpansionDataTable, + YAHOO.widget.DataTable, + { + + ////////////////////////////////////////////////////////////////// + // + // 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 + * @protected + **/ + _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 + * @protected + **/ + _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 + **/ + initAttributes : function( oConfigs ) { + + oConfigs = oConfigs || {}; + + YAHOO.widget.RowExpansionDataTable.superclass.initAttributes.call( this, oConfigs ); + + /** + * Value for the rowExpansionTemplate attribute. + * + * @attribute rowExpansionTemplate + * @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 + **/ + initRowExpansion : function( template ){ + + //Set subscribe restore method + this.subscribe( 'postRenderEvent', this.onEventRestoreRowExpansion ); - //Set table level state - this.a_rowExpansions = []; + //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 ); + /** + * Toggles the expansion state of a row + * + * @method toggleRowExpansion + * @param {Mixed} record_id Record / Row / or Index id + **/ + toggleRowExpansion : function( record_id ){ - if( state && state.expanded ){ + var state = this._getRecordState( record_id ); - this.collapseRow( record_id ); + if( state && state.expanded ){ - } else { + this.collapseRow( record_id ); - this.expandRow( 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 ); + /** + * 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 + **/ + expandRow : function( record_id, restore ){ - if( !state.expanded || restore ){ + var state = this._getRecordState( record_id ); - 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 ); + if( !state.expanded || restore ){ - //Construct expanded row body - new_row.className = CLASS_EXPANSION; - var new_column = document.createElement( 'td' ); - new_column.colSpan = column_length; + 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 ); - new_column.innerHTML = '<div class="'+ CLASS_LINER +'"></div>'; - new_row.appendChild( new_column ); + //Construct expanded row body + new_row.className = CLASS_EXPANSION; + var new_column = document.createElement( 'td' ); + new_column.colSpan = column_length; - var liner_element = new_row.firstChild.firstChild; + new_column.innerHTML = '<div class="'+ CLASS_LINER +'"></div>'; + new_row.appendChild( new_column ); - if( YAHOO.lang.isString( template ) ){ + var liner_element = new_row.firstChild.firstChild; - liner_element.innerHTML = YAHOO.lang.substitute( - template, - expanded_data - ); + if( YAHOO.lang.isString( template ) ){ - } else if( YAHOO.lang.isFunction( template ) ) { + liner_element.innerHTML = YAHOO.lang.substitute( + template, + expanded_data + ); - template( { - row_element : new_row, - liner_element : liner_element, - data : row_data, - state : state + } else if( YAHOO.lang.isFunction( template ) ) { - } ); + template( { + row_element : new_row, + liner_element : liner_element, + data : row_data, + state : state + } ); - } else { + } else { - return false; + return false; - } + } - //Insert new row - newRow = Dom.insertAfter( new_row, row ); + //Insert new row + newRow = Dom.insertAfter( new_row, row ); - if (newRow.innerHTML.length) { + if (newRow.innerHTML.length) { - this._setRecordState( record_id, 'expanded', true ); + this._setRecordState( record_id, 'expanded', true ); - if( !restore ){ + if( !restore ){ - this.a_rowExpansions.push( this.getRecord( record_id ).getId() ); + this.a_rowExpansions.push( this.getRecord( record_id ).getId() ); - } + } - Dom.removeClass( row, CLASS_COLLAPSED ); - Dom.addClass( row, CLASS_EXPANDED ); + Dom.removeClass( row, CLASS_COLLAPSED ); + Dom.addClass( row, CLASS_EXPANDED ); - //Fire custom event - this.fireEvent( "rowExpandEvent", { record_id : row_data.getId() } ); + //Fire custom event + this.fireEvent( "rowExpandEvent", { record_id : row_data.getId() } ); - return true; + return true; - } else { + } else { - return false; + 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 ){ + /** + * Sets the expansion state of a row to collapsed + * @method collapseRow + * @param {Mixed} record_id Record / Row / or Index id + * @return {Boolean} successful + **/ + collapseRow : function( record_id ){ - var row_data = this.getRecord( record_id ), - row = Dom.get( row_data.getId() ), - state = row_data.getData( STRING_STATENAME ); + var row_data = this.getRecord( record_id ), + row = Dom.get( row_data.getId() ), + state = row_data.getData( STRING_STATENAME ); - if( state && state.expanded ){ + if( state && state.expanded ){ - var next_sibling = Dom.getNextSibling( row ), - hash_index = indexOf( this.a_rowExpansions, record_id ); + var next_sibling = Dom.getNextSibling( row ), + hash_index = indexOf( this.a_rowExpansions, record_id ); - if( Dom.hasClass( next_sibling, CLASS_EXPANSION ) ) { + 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 ); + 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 ); + Dom.addClass( row, CLASS_COLLAPSED ); + Dom.removeClass( row, CLASS_EXPANDED ); - //Fire custom event - this.fireEvent("rowCollapseEvent", { record_id : row_data.getId() } ); + //Fire custom event + this.fireEvent("rowCollapseEvent", { record_id : row_data.getId() } ); - return true; + return true; - } else { + } else { - return false; + 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(){ + /** + * 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 + **/ + collapseAllRows : function(){ - var rows = this.a_rowExpansions; + var rows = this.a_rowExpansions; - for( var i = 0, l = rows.length; l > i; i++ ){ + 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 ] ); + //Always pass 0 since collapseRow removes item from the a_rowExpansions array + this.collapseRow( rows[ 0 ] ); - } + } - a_rowExpansions = []; + 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(){ + /** + * 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 + **/ + restoreExpandedRows : function(){ - var expanded_rows = this.a_rowExpansions; + var expanded_rows = this.a_rowExpansions; - if( !expanded_rows.length ){ + if( !expanded_rows.length ){ - return; + return; - } + } - if( this.a_rowExpansions.length ){ + if( this.a_rowExpansions.length ){ - for( var i = 0, l = expanded_rows.length; l > i; i++ ){ + for( var i = 0, l = expanded_rows.length; l > i; i++ ){ - this.expandRow( expanded_rows[ i ] , true ); + 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 ){ + /** + * Abstract method which restores row expansion for subscribing to + * the DataTable postRenderEvent. + * + * @method onEventRestoreRowExpansion + * @param {Object} oArgs context of a subscribed event + **/ + onEventRestoreRowExpansion : function( oArgs ){ - this.restoreExpandedRows(); + 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 ){ + /** + * Abstract method which toggles row expansion for subscribing to + * the DataTable postRenderEvent. + * + * @method onEventToggleRowExpansion + * @param {Object} oArgs context of a subscribed event + **/ + onEventToggleRowExpansion : function( oArgs ){ - if( YAHOO.util.Dom.hasClass( oArgs.target, 'yui-dt-expandablerow-trigger' ) ){ + if( YAHOO.util.Dom.hasClass( oArgs.target, 'yui-dt-expandablerow-trigger' ) ){ - this.toggleRowExpansion( oArgs.target ); + this.toggleRowExpansion( oArgs.target ); - } + } - } + } - }); + }); })(); sandbox/rowexpansion/rowexpansion.js 682ff0399e77af4e5e8aee503c8e13eba8959826 Luke Smith lsmith@yahoo-inc.com http://github.com/yui/yui2/commit/5d3b5744a0168264127a3a1199db64f7d9e72546 5d3b5744a0168264127a3a1199db64f7d9e72546 2009-12-01T15:23:03-08:00 2009-12-01T15:23:03-08:00 Duplicating example files in sandbox dir for ease of maintenance. 326b0608addfdc95da12989b451cd737f8e27245 Luke Smith lsmith@yahoo-inc.com