mootable.js

很不错的一本书

/**
* @file mootable.js
* @author Mark Fabrizio Jr.
* @date January 24, 2007
* 
* MooTable class takes an existing table as an argument and turns it into a cooler table.
* MooTables allow headings to be resized as well as sorted.
*/
Element.extend({ setHTML:function(html){ var tagName = this.getTag(); if(window.ActiveXObject && tagName.test(/thead|tbody|tr|td/)){ /*- for mootools v1 if(window.ie && tagName.test(/thead|tbody|tr|td/)){ */ var div = new Element('div'), depth; switch (tagName) { case 'thead': case 'tbody': div.innerHTML = '<table><tbody>'+html+'</tbody></table>';depth = 2;break; case 'tr': div.innerHTML = '<table><tbody><tr>'+ html+'</tr></tbody></table>';depth = 3;break; case 'td': div.innerHTML = '<table><tbody><tr><td>'+html+'</td></tr></tbody></table>';depth = 4; } $A(this.childNodes).each( function(node){this.removeChild(node)}, this); for(var i=0; i< depth; i++) div = div.firstChild; $A(div.childNodes).each( function(node){this.adopt(node)}, this); }else{ this.innerHTML = html; } return this; } });
var MooTable = new Class({
	
	initialize: function( el, options ){
		this.element = $(el);
		this.options = Object.extend( 
			{ 
				height: '100px',
				resizable: true,
				sortable: true,
				useloading: true,
				position: 'inside',
				section: 100,
				delay: 10,
				fade: true,
				headers: false,
				data: false,
				debug: false
			} , options || {} );
		/* set up our reference arrays */
		this.headers = []; 
		this.rows = [];
		this.fade = this.options.fade ? (window.ie6 ? '' : '<div class="fade"></div>') : '';
		this.loading = true;
		/* initalize variables */
		this.sortasc=true;
		this.sortby=false;
		this.sortby2=false;
		
		if( this.options.debug ){
			this.debug = {};
			debug.log('debug: on');
			this.addEvent( 'buildStart', function(){
				this.debug.startTime = new Date().getTime();	
			});
			this.addEvent( 'buildFinish', function(){
				debug.log( 'build: '+ ( (new Date().getTime() - this.debug.startTime ) / 1000 ) + ' seconds' );
				
			});
			this.addEvent( 'sortStart', function(){
				this.debug.sortStart = new Date().getTime();
			});
			this.addEvent( 'sortFinish', function(){
				debug.log( 'sort: '+ ( (new Date().getTime() - this.debug.sortStart ) / 1000 ) + ' seconds' );
			});
		}
		if( this.options.useloading ){
			this.addEvent( 'loadingStart', function(){
				this.tbody.setStyle('overflow', 'hidden');
				this.tbodyloading.setStyle('display', 'block');
			});
			
			this.addEvent( 'loadingFinish', function(){
				this.tbody.setStyle('overflow', 'auto');
				this.tbodyloading.setStyle('display', 'none');	
			});
		}
		/* create the table */
		this._makeTable(this.element);
		
		this.div.setStyle('height', this.options.height );
		this._manageHeight();
		this.tbody.addEvent('scroll', function(event){
			this.thead_tr.setStyle( 'left', '-'+this.tbody.scrollLeft+'px' );
			return true;
		}.bind(this));
		this._initDisplayOptions();
	},
	
	_manageHeight: function(){
		var offset = this.options.resizable ? 8 : 1;
		this.tbody.setStyle('height', (this.div.getSize().size.y - this.thead.getSize().size.y - offset ) + 'px' );
		if( this.options.useloading ){
			this.tbodyloading.setStyle('height', (this.div.getSize().size.y - this.thead.getSize().size.y - offset)  + 'px' );
		}
		this.tbody.setStyle('top', this.thead.getSize().size.y + 'px' );
		
	},
	_rememberCookies: function(){
		this.headers.each( function( header ){
			var width = this._getWidthCookie( header.element )
			if( width ){
				header.element.setStyle('width', width );
				this._changeColumnWidth( header.element );
			}
		}, this );
	},
	
	_makeTable: function(el){
		this._fireEvent('buildStart');
		if( !el ){
			return;
		}
		this._createTableFramework();
		if( el.getTag() == 'table'){
			this._fireEvent('loadingStart');
			this._makeTableFromTable( el );
			return;
		}
		this.div.inject( el, this.options.position );
		this._build();
	},
	
	_makeTableFromTable: function(t,count){
		
		var rows = $type(t) == 'array' ? t : t.getElements('tr');
		if( !$chk(count) ) count = 0;
		var section=0;
		while( count < rows.length && section < this.options.section){
			var tr = rows[count];
			if( count == 0 ){
				t.setStyle('display', 'none');
				this.div.injectBefore(t);
				if(t.getElement('tfoot')) t.getElement('tfoot').remove();
				tr.getElementsBySelector('th,td').each( function( th ){
					value = th.innerHTML;
					this._addHeader(value);
				}, this);
				this._setHeaderWidth();
			}
			else if( count > 0 ){
				var values = [];
				tr.getElements('td').each( function( td ){ 
					values.push( td.innerHTML );
					
				}, this);
				this.addRow( values );
				if( count == 1){
					this._setColumnWidths();
				}
			}
			count++;
			section++;
		}
		if( count < rows.length ){
			this.loading = true;
			this._makeTableFromTable.delay(this.options.delay, this, [rows,count] );
		}
		else{
			this.loading = false;
			this._setWidths();
			this._fireEvent('buildFinish');
			this._fireEvent('loadingFinish');
		}
	},
	
	_build: function(){
		if( this.options.headers && $type(this.options.headers) == 'array'){
			this.options.headers.each( function( h ){
				switch( $type( h ) ){
					case 'string':
						this._addHeader( h.trim()=='' ? '&nbsp;' : h );
						break;
					
					case 'object':
						this._addHeader( h.text || '&nbsp;', h );
						break;
						
					default:
						break;
				}
			},this ); 
		}
		/* do a little cleanup to keep this object reasonable */
		this.options.headers = null;
		if( this.options.data && $type( this.options.data ) == 'array' ){
			this._loadData( this.options.data );
		}
	},
	
	loadData: function( data, append ){
		if( !$chk(append) ){ append = true; }
		if( !append ){
			this._emptyData();
		}
		this._loadData( data );
	},
	
	_emptyData: function(){
		this.rows.each( function(row){
			row.element.remove();
		});
		this.rows = [];
			
	},
	
	_loadData: function( data, index ){
		if( !$chk(index) ) index = 0;
		var section=0;
		if( index == 0 ){
			this._fireEvent( 'loadingStart' );
		}
		for( index = index; index < data.length && section < this.options.section; index++){
			// load data
			var d = data[index];
			switch( $type( d ) ){
				case 'array':
				case 'object':
					this.addRow( d );
					break;
				default:
					break;
			}
			section++;
		}
		if( index < data.length ){
			this._setColumnWidths.delay( 20, this );
			this.loading = true;
			this._loadData.delay(this.options.delay, this, [data,index] )
		}
		else{
			this._setColumnWidths();
			this._fireEvent('loadingFinish');
			this._fireEvent('buildFinish');
		}
			
	},
	
	_createTableFramework: function(){
		this.div = new Element('div').addClass('mootable_container');
		this.mootable = new Element('div').addClass( 'mootable' ).injectInside( this.div );
		this.thead = new Element('div').addClass('thead').injectInside( this.mootable );
		this.thead_tr = new Element('div').addClass('tr').injectInside( this.thead );
		this.tbody = new Element('div').addClass('tbody').injectAfter( this.thead );
		this.table = new Element('table').setProperties({cellpadding: '0', cellspacing: '0', border: '0'}).injectInside(this.tbody);
		this.tablebody = new Element('tbody').injectInside( this.table );
		if( this.options.useloading ){
			this.tbodyloading = new Element('div').addClass('loading').injectInside( this.tbody );
			this.tbodyloading.setStyle('opacity', '.84');
		}
		if( this.options.resizable ){
			this.resizehandle = new Element('div').addClass('resizehandle').injectInside(this.div);
			new Drag.Base( this.div, {
				handle: this.resizehandle,
				modifiers: {y: 'height'},
				onComplete: function(){
					this._manageHeight();
				}.bind(this)
			});
		}
	},
	
	
	_addHeader: function( value, opts ){
		var options = Object.extend({
			fixedWidth: false,
			defaultWidth: '100px',
			sortable: true,
			key: null,
			fade: true
		}, opts || {} ); 
		var cell = new Element('div').injectInside( this.thead_tr ).addClass('th');
		new Element('div').addClass('cell').setHTML( value ).injectInside( cell );
		var h = {
			element: cell,
			value: value,
			options: options
		};
		h.element.col = this.headers.length;
		this.headers.push( h );
		var width = this._getWidthCookie( h.element );
		if( width && !h.options.fixedWidth ){
			h.element.setStyle('width', width );
			//this._changeColumnWidth( h.element );
		}else{
			h.element.setStyle('width', h.options.defaultWidth );
		}
		
		h.width = h.element.getStyle('width');
		if( this.options.sortable && h.options.sortable ){
			h.element.addClass('sortable');
			h.element.addEvent('mouseup', function(ev){
				this.sort( h.element.col );