From 7c46c9e02ec640b05e76f65e0982ff19235736e1 Mon Sep 17 00:00:00 2001 From: Mottie Date: Thu, 28 May 2015 11:30:49 -0500 Subject: [PATCH] Scroller: lots of updates * Support multiple tbodies. See #906 * Limit horizontal scrollbar to scrolling section * Removed widthFixed requirement * Update RTL support * Fix column alignment. Fixes #913 * Fix mousewheel scrolling in Firefox. See #135 * Fix filter returning zero to few rows * Integrate with pager. Fixes #884 --- docs/example-widget-scroller.html | 392 ++++++++++++-------- js/widgets/widget-scroller.js | 577 +++++++++++++++++++++--------- 2 files changed, 657 insertions(+), 312 deletions(-) diff --git a/docs/example-widget-scroller.html b/docs/example-widget-scroller.html index 3b7029e3..57741536 100644 --- a/docs/example-widget-scroller.html +++ b/docs/example-widget-scroller.html @@ -33,7 +33,39 @@ - '; $( style ).appendTo( 'body' ); }); @@ -143,9 +149,17 @@ ts.scroller = { isFirefox : navigator.userAgent.toLowerCase().indexOf( 'firefox' ) > -1, // old IE needs a wrap to hide the fixed column scrollbar; http://stackoverflow.com/a/24408672/145346 isOldIE : document.all && !window.atob, + // http://stackoverflow.com/questions/7944460/detect-safari-browser - needed to position scrolling body + // when the table is set up in RTL direction + isSafari : navigator.userAgent.toLowerCase().indexOf( 'safari' ) > -1 && + navigator.userAgent.toLowerCase().indexOf( 'chrome' ) === -1, - hasScrollBar : function( $target ) { - return $target.get(0).scrollHeight > $target.height(); + hasScrollBar : function( $target, checkWidth ) { + if ( checkWidth ) { + return $target.get(0).scrollWidth > $target.width(); + } else { + return $target.get(0).scrollHeight > $target.height(); + } }, setWidth : function( $el, width ) { @@ -158,15 +172,23 @@ ts.scroller = { // modified from http://davidwalsh.name/detect-scrollbar-width getBarWidth : function() { - var $scrollDiv = $( '
' ).appendTo( 'body' ), - div = $scrollDiv[ 0 ], - barWidth = div.offsetWidth - div.clientWidth; - $scrollDiv.remove(); + var $div = $( '
' ).css({ + 'position' : 'absolute', + 'top' : '-9999px', + 'left' : 0, + 'width' : '100px', + 'height' : '100px', + 'overflow' : 'scroll', + 'visibility' : 'hidden' + }).appendTo( 'body' ), + div = $div[0], + barWidth = div.offsetWidth - div.clientWidth; + $div.remove(); return barWidth; }, setup : function( c, wo ) { - var maxHt, tbHt, $hdr, $t, $hCells, $fCells, $tableWrap, + var maxHt, tbHt, $hdr, $t, $hCells, $fCells, $tableWrap, tmp, $win = $( window ), namespace = c.namespace + 'tsscroller', $foot = $(), @@ -174,6 +196,11 @@ ts.scroller = { id = c.namespace.slice( 1 ) + 'tsscroller', $table = c.$table; + // set scrollbar width & allow setting width to zero + wo.scroller_barSetWidth = wo.scroller_barWidth !== null ? + wo.scroller_barWidth : + ( ts.scroller.getBarWidth() || 15 ); + maxHt = wo.scroller_height || 300; // sum all tbody heights tbHt = 0; @@ -181,16 +208,17 @@ ts.scroller = { tbHt += $( this ).outerHeight(); }); - wo.scroller_$header = $hdr = $( '' + - $table.children( 'thead' )[0].outerHTML + - '
' ) - .addClass( c.namespace.slice(1) + '_extra_table' ); + $hdr = $( '' + + $table.children( 'thead' )[ 0 ].outerHTML + '
' ); + wo.scroller_$header = $hdr.addClass( c.namespace.slice( 1 ) + '_extra_table' ); $t = $table.children( 'tfoot' ); if ( $t.length ) { - $foot = $( '
' ) - .addClass( c.namespace.slice(1) + '_extra_table' ) - .append( $t.clone( true ) ) // maintain any bindings on the tfoot cells + $foot = $( '
' ) + .addClass( c.namespace.slice( 1 ) + '_extra_table' ) + // maintain any bindings on the tfoot cells + .append( $t.clone( true ) ) .wrap( '
' ); $fCells = $foot.children( 'tfoot' ).eq( 0 ).children( 'tr' ).children(); } @@ -200,7 +228,8 @@ ts.scroller = { .wrap( '
' ) .before( $hdr ) // shrink filter row but don't completely hide it because the inputs/selectors may distort the columns - .find( '.' + tscss.filterRow ).addClass( tscss.filterRowHide ); + .find( '.' + tscss.filterRow ) + .addClass( tscss.filterRowHide ); wo.scroller_$container = $table.parent(); @@ -222,19 +251,12 @@ ts.scroller = { // look for filter widget if ( $table.hasClass( 'hasFilters' ) ) { - ts.filter.bindSearch( $table, $hdr.find('.' + tscss.filter) ); + ts.filter.bindSearch( $table, $hdr.find( '.' + tscss.filter ) ); } - // remove any previous fixed columns ( in case we're updating ) - wo.scroller_$container.find( '.' + tscss.scrollerFixed ).remove(); - - if ( wo.scroller_fixedColumns > 0 ) { - ts.scroller.setupFixed( c, wo ); - } - - ts.scroller.resize( c, wo ); - - $table.find( 'thead' ).hide(); + $table + .find( 'thead' ) + .addClass( tscss.scrollerHideElement ); tbHt = $tableWrap.parent().height(); @@ -248,31 +270,42 @@ ts.scroller = { $win.scrollTop( $hdr.offset().top ); } } - $hdr.parent().add( $foot.parent() ).scrollLeft( $( this ).scrollLeft() ); + $hdr + .parent() + .add( $foot.parent() ) + .scrollLeft( $( this ).scrollLeft() ); }); // Sorting, so scroll to top + tmp = 'sortEnd setFixedColumnSize updateComplete pagerComplete pagerInitialized ' + .split( ' ' ) + .join( namespace + ' ' ); $table - .off( 'sortEnd setFixedColumnSize updateComplete '.split( ' ' ).join( namespace + ' ' ) ) + .off( tmp ) .on( 'sortEnd' + namespace, function() { if ( wo.scroller_upAfterSort ) { - $table.parent().animate({ scrollTop: 0 }, 'fast' ); + $table.parent().animate({ + scrollTop : 0 + }, 'fast' ); } }) .on( 'setFixedColumnSize' + namespace, function( event, size ) { + var $wrap = wo.scroller_$container; if ( typeof size !== 'undefined' && !isNaN( size ) ) { wo.scroller_fixedColumns = parseInt( size, 10 ); } // remove fixed columns - wo.scroller_$container.find( '.' + tscss.scrollerFixed ).remove(); + ts.scroller.removeFixed( c, wo ); size = wo.scroller_fixedColumns; if ( size > 0 && size < c.columns - 1 ) { - ts.scroller.setupFixed( c, wo ); - } else { - wo.scroller_$container.removeClass( tscss.scrollerHasFix ); + ts.scroller.updateFixed( c, wo ); + } else if ( $wrap.hasClass( tscss.scrollerHasFix ) ) { + $wrap.removeClass( tscss.scrollerHasFix ); + // resize needed to make tables full width + ts.scroller.resize( c, wo ); } }) - .on( 'updateComplete' + namespace, function() { + .on( 'updateComplete pagerComplete pagerInitialized '.split( ' ' ).join( namespace + ' ' ), function() { // adjust column sizes after an update ts.scroller.resize( c, wo ); }); @@ -287,44 +320,47 @@ ts.scroller = { $win.off( 'resize' + namespace, ts.window_resize ); ts.scroller.resize( c, wo ); $win.on( 'resize' + namespace, ts.window_resize ); + $tableWrap.trigger( 'scroll' + namespace ); }); // initialization flag c.isScrolling = true; + ts.scroller.updateFixed( c, wo ); + }, resize : function( c, wo ) { - var index, borderWidth, setWidth, $hCells, $bCells, $fCells, $headers, $this, + var index, borderWidth, setWidth, $hCells, $bCells, $fCells, $headers, $this, temp, $table = c.$table, $tableWrap = $table.parent(), $hdr = wo.scroller_$header, $foot = wo.scroller_$footer, id = c.namespace.slice( 1 ) + 'tsscroller', // Hide other scrollers so we can resize - $div = $( 'div.' + tscss.scrollerWrap + '[id != "' + id + '"]' ).hide(); + $div = $( 'div.' + tscss.scrollerWrap + '[id!="' + id + '"]' ) + .addClass( tscss.scrollerHideElement ); + + // Remove fixed so we get proper widths and heights + ts.scroller.removeFixed( c, wo ); // show original table thead to get proper alignments - $table.children( 'thead' ).show(); + $table.children( 'thead' ).removeClass( tscss.scrollerHideElement ); // Reset sizes so parent can resize. $table .addClass( tscss.scrollerReset ) .children( 'thead' ) - .find( '.' + tscss.headerIn ).addClass( tscss.scrollerReset ).end() - .find( '.' + tscss.filterRow ).show(); + .find( '.' + tscss.headerIn ) + .addClass( tscss.scrollerReset ) + .end() + .find( '.' + tscss.filterRow ) + .removeClass( tscss.scrollerHideElement ); $tableWrap.addClass( tscss.scrollerReset ); // include left & right border widths borderWidth = parseInt( $table.css( 'border-left-width' ), 10 ); - // Shrink a bit to accommodate scrollbar - wo.scroller_barSetWidth = ( wo.scroller_barWidth || ts.scroller.getBarWidth() || 18 ) + borderWidth; - - $tableWrap.width( $tableWrap.parent().innerWidth() - ( ts.scroller.hasScrollBar( $tableWrap.parent() ) ? wo.scroller_barSetWidth : 0 ) ); - setWidth = $tableWrap.innerWidth() - ( ts.scroller.hasScrollBar( $tableWrap ) ? wo.scroller_barSetWidth : 0 ) + borderWidth; - $hdr.parent().add( $foot.parent() ).width( setWidth ); - $hCells = $hdr .children( 'thead' ) .children( 'tr' ) @@ -345,7 +381,11 @@ ts.scroller = { .filter( ':visible' ); ts.scroller.setWidth( $hCells.add( $bCells ).add( $fCells ), '' ); - $headers = $table.children( 'thead' ).children().eq( 0 ).children( 'th, td' ); + $headers = $table + .children( 'thead' ) + .children() + .eq( 0 ) + .children( 'th, td' ); for ( index = 0; index < $headers.length; index++ ) { $this = $headers.eq( index ); // code from https://github.com/jmosbech/StickyTableHeaders @@ -354,36 +394,49 @@ ts.scroller = { } else { if ( $hCells.eq( index ).css( 'border-collapse' ) === 'collapse' ) { if ( $this.length && window.getComputedStyle ) { - setWidth = parseFloat( window.getComputedStyle( $this[0], null ).width ); + setWidth = parseFloat( window.getComputedStyle( $this[ 0 ], null ).width ); } else { // ie8 only - borderWidth = parseFloat( $this.css( 'border-width' ) ) || 0; - setWidth = $this.outerWidth() - parseFloat( $this.css( 'padding-left' ) ) - parseFloat( $this.css( 'padding-right' ) ) - borderWidth; + setWidth = $this.outerWidth() - parseFloat( $this.css( 'padding-left' ) ) - + parseFloat( $this.css( 'padding-right' ) ) - + ( parseFloat( $this.css( 'border-width' ) ) || 0 ); } } else { setWidth = $this.width(); } } - ts.scroller.setWidth( $hCells.eq( index ).add( $bCells.eq( index ) ).add( $fCells.eq( index ) ), setWidth ); + temp = $hCells.eq( index ) + .add( $bCells.eq( index ) ) + .add( $fCells.eq( index ) ); + ts.scroller.setWidth( temp, setWidth ); } + temp = $tableWrap.parent().innerWidth() - + ( ts.scroller.hasScrollBar( $tableWrap ) ? wo.scroller_barSetWidth : 0 ); + $tableWrap.width( temp ); + setWidth = $tableWrap.innerWidth() - + ( ts.scroller.hasScrollBar( $tableWrap ) ? wo.scroller_barSetWidth : 0 ) + borderWidth; + + $hdr + .parent() + .add( $foot.parent() ) + .width( setWidth ); + wo.scroller_$container .find( '.' + tscss.scrollerReset ) .removeClass( tscss.scrollerReset ); // update fixed column sizes - if ( wo.scroller_fixedColumns > 0 ) { - ts.scroller.updateFixed( c, wo, true ); - } + ts.scroller.updateFixed( c, wo ); // hide original table thead - $table.children( 'thead' ).hide(); + $table.children( 'thead' ).addClass( tscss.scrollerHideElement ); - $div.show(); + $div.removeClass( tscss.scrollerHideElement ); }, - // Add fixed (frozen) columns + // Add fixed (frozen) columns (Do not call directly, use updateFixed) setupFixed : function( c, wo ) { var index, index2, $el, len, temp, $fixedColumn, $fixedTbody, $fixedContainer, $table = c.$table, @@ -400,13 +453,15 @@ ts.scroller = { if ( wo.scroller_addFixedOverlay ) { $fixedColumn.append( '
' ); } - $fixedTbody = $fixedColumn.find( '.' + tscss.scrollerTable ); - $fixedTbody.children( 'table' ) - .addClass( c.namespace.slice(1) + '_extra_table' ) - .attr( 'id', '' ); + $fixedTbody = $fixedColumn.find( '.' + tscss.scrollerTable ); $fixedContainer = $fixedTbody.children( 'table' ).children( 'tbody' ); - $fixedTbody.children( 'table' ).children( 'thead, tfoot' ).remove(); + $fixedTbody + .children( 'table' ) + .addClass( c.namespace.slice( 1 ) + '_extra_table' ) + .attr( 'id', '' ) + .children( 'thead, tfoot' ) + .remove(); wo.scroller_$fixedColumns = $fixedColumn; @@ -420,13 +475,22 @@ ts.scroller = { for ( index = 0; index < len; index++ ) { $el.eq( index ).children( ':gt(' + ( fixedColumns - 1 ) + ')' ).remove(); } - $fixedColumn.hide().prependTo( $wrapper ); + $fixedColumn + .addClass( tscss.scrollerHideElement ) + .prependTo( $wrapper ); // look for filter widget if ( c.$table.hasClass( 'hasFilters' ) ) { + // make sure fixed column filters aren't disabled + $el = $fixedColumn + .find( '.' + tscss.filter ) + .not( '.' + tscss.filterDisabled ) + .prop( 'disabled', false ); ts.filter.bindSearch( $table, $fixedColumn.find( '.' + tscss.filter ) ); // disable/enable filters behind fixed column - $el = $wrapper.children( '.' + tscss.scrollerHeader ).find( '.' + tscss.filter ); + $el = $wrapper + .children( '.' + tscss.scrollerHeader ) + .find( '.' + tscss.filter ); len = $el.length; for ( index = 0; index < len; index++ ) { // previously disabled filter; don't mess with it! filterDisabled class added by filter widget @@ -441,10 +505,14 @@ ts.scroller = { c.$table .add( '.' + tscss.scrollerFooter + ' table' ) .children( 'thead' ) - .children( 'tr.' + tscss.headerRow ).children().attr( 'tabindex', -1 ); + .children( 'tr.' + tscss.headerRow ) + .children() + .attr( 'tabindex', -1 ); + $el = wo.scroller_$header .add( $fixedColumn.find( '.' + tscss.scrollerTable + ' table' ) ) - .children( 'thead' ).children( 'tr.' + tscss.headerRow ); + .children( 'thead' ) + .children( 'tr.' + tscss.headerRow ); len = $el.length; for ( index = 0; index < len; index++ ) { temp = $el.eq( index ).children(); @@ -458,11 +526,9 @@ ts.scroller = { /*** Scrollbar hack! Since we can't hide the scrollbar with css ***/ if ( ts.scroller.isFirefox || ts.scroller.isOldIE ) { - $fixedTbody.wrap( '
' ); + $fixedTbody.wrap( '
' ); } - ts.scroller.updateFixed( c, wo, true ); - }, bindFixedColumnEvents : function( c, wo ) { @@ -478,6 +544,7 @@ ts.scroller = { .off( events ) .on( events, function() { ts.scroller.updateFixed( c, wo, false ); + ts.scroller.resize( c, wo ); }) .parent() // *** SCROLL *** scroll fixed column along with main @@ -487,7 +554,9 @@ ts.scroller = { if ( fixedScroll || !ts.scroller.isFirefox ) { tableScroll = false; $fixedTbody[0].scrollTop = $( this ).scrollTop(); - setTimeout(function(){ tableScroll = true; }, 20); + setTimeout( function() { + tableScroll = true; + }, 20 ); } }); // scroll main along with fixed column @@ -495,10 +564,12 @@ ts.scroller = { .off( events2 ) .on( events2, function() { // using flags to prevent firing the scroll event excessively leading to slow scrolling in Firefox - if ( tableScroll || !ts.scroller.isFirefox ) { + if ( tableScroll || !ts.scroller.isFirefox ) { fixedScroll = false; c.$table.parent()[0].scrollTop = $( this ).scrollTop(); - setTimeout(function(){ fixedScroll = true; }, 20); + setTimeout( function() { + fixedScroll = true; + }, 20 ); } }) .scroll(); @@ -511,16 +582,24 @@ ts.scroller = { .off( events, 'tbody > tr' ) .on( events, 'tbody > tr', function( event ) { var indx = c.$table.children( 'tbody' ).children( 'tr' ).index( this ); - $fixedTbody.children( 'table' ).children( 'tbody' ).children( 'tr' ).eq( indx ) + $fixedTbody + .children( 'table' ) + .children( 'tbody' ) + .children( 'tr' ) + .eq( indx ) .add( this ) .toggleClass( wo.scroller_rowHighlight, event.type === 'mouseover' ); }); - $fixedTbody.find( 'table' ) + $fixedTbody + .find( 'table' ) .off( events, 'tbody > tr' ) .on( events, 'tbody > tr', function( event ) { var $fixed = $fixedTbody.children( 'table' ).children( 'tbody' ).children( 'tr' ), indx = $fixed.index( this ); - c.$table.children( 'tbody' ).children( 'tr' ).eq( indx ) + c.$table + .children( 'tbody' ) + .children( 'tr' ) + .eq( indx ) .add( this ) .toggleClass( wo.scroller_rowHighlight, event.type === 'mouseover' ); }); @@ -528,59 +607,88 @@ ts.scroller = { }, updateFixed : function( c, wo ) { - if ( !c.isScrolling ) { return; } + var $wrapper = wo.scroller_$container; - // no idea why this happens, but sometimes the main table wrapper gets the scrollbar width - // subtracted from it on load and on theme change - it can be very sporatic; this fixes it. - c.$table.parent().width( wo.scroller_$container.width() ); + if ( wo.scroller_fixedColumns === 0 ) { + ts.scroller.removeFixed( c, wo ); + return; + } + + if ( !c.isScrolling ) { + return; + } + + // Make sure the wo.scroller_$fixedColumns container exists if not build it + if ( !$wrapper.find( '.' + tscss.scrollerFixed ).length ) { + ts.scroller.setupFixed( c, wo ); + } // scroller_fixedColumns - var index, tbodyIndex, rowIndex, $tbody, $adjCol, $fb, totalRows, widths, $fixHead, $fixBody, $fixFoot, + var index, tbodyIndex, rowIndex, $tbody, $adjCol, $fb, $fixHead, $fixBody, $fixFoot, + totalRows, widths, temp, adj, row, $table = c.$table, - $wrapper = wo.scroller_$container, + $tableWrap = $table.parent(), + $hdr = wo.scroller_$header, + $foot = wo.scroller_$footer, // source cells for measurement - $mainTbodies = wo.scroller_$container.children( '.' + tscss.scrollerTable ).children( 'table' ).children( 'tbody' ), - $rows = wo.scroller_$header.children( 'thead' ).children( '.' + tscss.headerRow ), // variable gets redefined + $mainTbodies = wo.scroller_$container + .children( '.' + tscss.scrollerTable ) + .children( 'table' ) + .children( 'tbody' ), + // variable gets redefined + $rows = wo.scroller_$header + .children( 'thead' ) + .children( '.' + tscss.headerRow ), // hide fixed column during resize, or we get a FOUC - $fixedColumn = wo.scroller_$fixedColumns.hide(), + $fixedColumn = wo.scroller_$fixedColumns + .addClass( tscss.scrollerHideElement ), // target cells - $fixedTbodiesTable = $fixedColumn.find( '.' + tscss.scrollerTable ).children( 'table' ), - $fixedTbodies = $fixedTbodiesTable.children( 'tbody' ), - $fixedHeader = $fixedColumn.find( '.' + tscss.scrollerHeader ).children( 'table' ).children( 'thead' ), + $fixedTbodiesTable = $fixedColumn + .find( '.' + tscss.scrollerTable ) + .children( 'table' ), + $fixedTbodies = $fixedTbodiesTable + .children( 'tbody' ), // variables tsScroller = ts.scroller, scrollBarWidth = wo.scroller_barSetWidth, fixedColumns = wo.scroller_fixedColumns, + dir = $table.hasClass( tscss.scrollerRtl ), // get dimensions $temp = $table.find( 'tbody td' ), borderRightWidth = parseInt( $temp.css( 'border-right-width' ), 10 ) || 1, - borderBottomWidth = parseInt( $temp.css( 'border-bottom-width' ), 10 ) || 1, - borderSpacing = parseInt( $temp.css( 'border-spacing' ).split( /\s/ )[ 0 ], 10 ) / 2 || 0, - totalWidth = parseInt( $table.css( 'padding-left' ), 10 ) + parseInt( $table.css( 'padding-right' ), 10 ) - borderRightWidth; + borderSpacing = parseInt( ( $temp.css( 'border-spacing' ) || '' ).split( /\s/ )[ 0 ], 10 ) / 2 || 0, + totalWidth = parseInt( $table.css( 'padding-left' ), 10 ) + + parseInt( $table.css( 'padding-right' ), 10 ) - + borderRightWidth; - // fixed header cell height - $temp = $fixedHeader.children( '.' + tscss.headerRow ); - for ( index = 0; index < $temp.length; index++ ) { - $temp.eq( index ).height( $rows.eq( index ).outerHeight() ); - } + ts.scroller.removeFixed( c, wo, false ); - // body cell dimensions seem to be more accurate *shrug* ( $rows contains table cells in this block ) - $rows = c.filteredRows > 0 ? c.$tbodies.children( 'tr:visible' ).children() : $( c.$headerIndexed ); // recalculate widths - widths = $rows.filter( ':lt(' + fixedColumns + ')' ).map( function() { - totalWidth += $( this ).outerWidth() + borderSpacing; - return $( this ).outerWidth(); - }).get(); + $table.children( 'thead' ).removeClass( tscss.scrollerHideElement ); + widths = []; + for ( index = 0; index < c.columns; index++ ) { + temp = c.$headerIndexed[ index ].outerWidth(); + totalWidth += index < fixedColumns ? temp + borderSpacing : 0; + widths.push( temp ); + } + $table.children( 'thead' ).addClass( tscss.scrollerHideElement ); // set fixed column width - tsScroller.setWidth( $fixedColumn.add( $fixedColumn.children() ), totalWidth + borderRightWidth * 2 - borderSpacing ); - tsScroller.setWidth( $fixedColumn.find( 'table' ), totalWidth + borderRightWidth ); + totalWidth = totalWidth + borderRightWidth * 2 - borderSpacing; + tsScroller.setWidth( $fixedColumn.add( $fixedColumn.children() ), totalWidth ); + tsScroller.setWidth( $fixedColumn.children().children( 'table' ), totalWidth ); - // set fixed column height ( changes with filtering ) - $fixedColumn.height( $wrapper.height() ); + $table.find( '.' + tscss.scrollerSpacerRow ).remove(); + row = ''; + for ( index = 0; index < c.columns; index++ ) { + row += ''; + } + c.$tbodies.eq(0).prepend( row += '' ); // update fixed column tbody content, set row height & set cell widths for first row for ( tbodyIndex = 0; tbodyIndex < c.$tbodies.length; tbodyIndex++ ) { @@ -589,28 +697,42 @@ ts.scroller = { // get tbody $rows = $tbody.children(); totalRows = $rows.length; - $fb = ts.processTbody( $fixedTbodiesTable, $fixedTbodies.eq( tbodyIndex ), true); + $fb = ts.processTbody( $fixedTbodiesTable, $fixedTbodies.eq( tbodyIndex ), true ); $fb.empty(); // update tbody cells after sort/filtering for ( rowIndex = 0; rowIndex < totalRows; rowIndex++ ) { $adjCol = $( $rows[ rowIndex ].outerHTML ); - $adjCol.children( 'td, th' ).slice( fixedColumns ).remove(); - // set row height - $adjCol.children().eq( 0 ).height( $rows.eq( rowIndex ).outerHeight() - ( tsScroller.isFirefox ? borderBottomWidth * 2 : 0 ) ); - // still need to adjust tbody cell widths ( the previous row may now be filtered ) - if ( rowIndex === 0 ) { - tsScroller.setWidth( $adjCol.children().eq( 0 ), widths[ 0 ] ); - } + $adjCol + .children( 'td, th' ) + .slice( fixedColumns ) + .remove(); $fb.append( $adjCol ); } // adjust fixed thead/tbody/tfoot cell widths - $fixHead = $fixedColumn.find( 'thead' ).children( 'tr.' + tscss.headerRow ).children(); - $fixBody = $fixedColumn.find( 'tbody' ).not('.' + c.cssInfoBlock ).children( 'tr' ).eq( 0 ).children(); - $fixFoot = $fixedColumn.find( 'tfoot' ).children( 'tr' ).eq( 0 ).children(); - for ( index = 0; index < fixedColumns; index++ ) { - $temp = $fixHead.eq( index ) - .add( $fixBody.eq( index ) ) - .add( $fixFoot.eq( index ) ); + $fixHead = $fixedColumn + .find( 'thead' ) + .children( 'tr.' + tscss.headerRow ) + .children(); + $fixBody = $fixedColumn + .find( tscss.scrollerSpacerRow ) + .children(); + $fixFoot = $fixedColumn + .find( 'tfoot' ) + .children( 'tr' ) + .eq( 0 ) + .children(); + // reusing variables, so ignore the names :P + $adjCol = $hdr.children( 'thead' ).children( 'tr' ).children( 'td, th' ); + $rows = $foot.children( 'tfoot' ).children( 'tr' ).children( 'td, th' ); + for ( index = 0; index < c.columns; index++ ) { + if ( index < fixedColumns ) { + $temp = $fixHead.eq( index ) + .add( $fixBody.eq( index ) ) + .add( $fixFoot.eq( index ) ); + tsScroller.setWidth( $temp, widths[ index ] ); + } + $temp = $adjCol.eq( index ) + .add( $rows.eq( index ) ); tsScroller.setWidth( $temp, widths[ index ] ); } @@ -621,25 +743,138 @@ ts.scroller = { /*** scrollbar HACK! Since we can't hide the scrollbar with css ***/ if ( tsScroller.isFirefox || tsScroller.isOldIE ) { - $fixedTbodiesTable.parent().css({ - 'width' : totalWidth + scrollBarWidth + borderRightWidth - }); + $fixedTbodiesTable + .parent() + .css({ + 'width' : totalWidth + }); } - if ( wo.scroller_$footer.length ) { - // adjust footer row heights (text could wrap on resize) - $temp = $wrapper.children( '.' + tscss.scrollerFooter ).find( 'tfoot tr' ); - $rows = $fixedColumn.find( '.' + tscss.scrollerFooter + ' tfoot tr' ); - for ( index = 0; index < $rows.length; index++ ) { - $rows.eq( index ).height( $temp.eq( index ).height() ); + $fixedColumn.removeClass( tscss.scrollerHideElement ); + for ( index = 0; index < fixedColumns; index++ ) { + $wrapper + .children( 'div' ) + .children( 'table' ) + .find( 'th:nth-child(' + ( index + 1 ) + '), td:nth-child(' + ( index + 1 ) + ')' ) + .addClass( tscss.scrollerHideColumn ); + } + + adj = ts.scroller.hasScrollBar( $tableWrap ) ? scrollBarWidth : 0; + totalWidth = totalWidth - borderRightWidth; + temp = $tableWrap.parent().innerWidth() - totalWidth; + $tableWrap.width( temp ); + // RTL support (fixes column on right) + $wrapper + .children( '.' + tscss.scrollerTable ) + .css( dir ? 'right' : 'left', totalWidth ); + $wrapper + .children( '.' + tscss.scrollerHeader + ', .' + tscss.scrollerFooter ) + // Safari needs a scrollbar width of extra adjusment to align the fixed & scrolling columns + .css( dir ? 'right' : 'left', totalWidth + ( dir && ts.scroller.isSafari ? adj : 0 ) ); + + $hdr + .parent() + .add( $foot.parent() ) + .width( temp - adj ); + + // fix gap under the tbody for the horizontal scrollbar + temp = ts.scroller.hasScrollBar( $tableWrap, true ); + adj = temp ? scrollBarWidth : 0; + if ( !$fixedColumn.find( '.' + tscss.scrollerBarSpacer ).length && temp ) { + $temp = $( '
' ) + .css( 'height', adj + 'px' ); + $fixedColumn.find( '.' + tscss.scrollerTable ).append( $temp ); + } else if ( !temp ) { + $fixedColumn.find( '.' + tscss.scrollerBarSpacer ).remove(); + } + + ts.scroller.updateRowHeight( c, wo ); + // set fixed column height (changes with filtering) + $fixedColumn.height( $wrapper.height() ); + + $fixedColumn.removeClass( tscss.scrollerHideElement ); + + }, + + fixHeight : function( $rows, $fixedRows ) { + var index, heightRow, heightFixed, $r, $f, + len = $rows.length; + for ( index = 0; index < len; index++ ) { + $r = $rows.eq( index ); + $f = $fixedRows.eq( index ); + heightRow = $r.height(); + heightFixed = $f.height(); + if ( heightRow > heightFixed ) { + $f.addClass( tscss.scrollerAddedHeight ).height( heightRow ); + } else if ( heightRow < heightFixed ) { + $r.addClass( tscss.scrollerAddedHeight ).height( heightFixed ); } } - // leave a gap under the tbody for the horizontal scrollbar - $fixedColumn.find( '.' + tscss.scrollerTable ) - .height( $table.parent().height() - scrollBarWidth + borderBottomWidth ); + }, - $fixedColumn.show(); + updateRowHeight : function( c, wo ) { + var $rows, $fixed, + $fixedColumns = wo.scroller_$fixedColumns; + wo.scroller_$container + .find( '.' + tscss.scrollerAddedHeight ) + .removeClass( tscss.scrollerAddedHeight ) + .height( '' ); + + $rows = wo.scroller_$header + .children( 'thead' ) + .children( 'tr' ); + $fixed = $fixedColumns + .children( '.' + tscss.scrollerHeader ) + .children( 'table' ) + .children( 'thead' ) + .children( 'tr' ); + ts.scroller.fixHeight( $rows, $fixed ); + + $rows = wo.scroller_$footer + .children( 'tfoot' ) + .children( 'tr' ); + $fixed = $fixedColumns + .children( '.' + tscss.scrollerFooter ) + .children( 'table' ) + .children( 'tfoot' ) + .children( 'tr' ); + ts.scroller.fixHeight( $rows, $fixed ); + + if ( ts.scroller.isFirefox ) { + // Firefox/Old IE scrollbar hack (wraps table to hide the scrollbar) + $fixedColumns = $fixedColumns.find( '.' + tscss.scrollerHack ); + } + $rows = c.$table + .children( 'tbody' ) + .children( 'tr' ); + $fixed = $fixedColumns + .children( '.' + tscss.scrollerTable ) + .children( 'table' ) + .children( 'tbody' ) + .children( 'tr' ); + ts.scroller.fixHeight( $rows, $fixed ); + + }, + + removeFixed : function( c, wo, removeIt ) { + var $table = c.$table, + $wrapper = wo.scroller_$container, + dir = $table.hasClass( tscss.scrollerRtl ); + + // remove fixed columns + if ( removeIt || typeof removeIt === 'undefined' ) { + $wrapper.find( '.' + tscss.scrollerFixed ).remove(); + } + + $wrapper + .find( '.' + tscss.scrollerHideColumn ) + .removeClass( tscss.scrollerHideColumn ); + + // RTL support ( fixes column on right ) + $wrapper + .children( ':not(.' + tscss.scrollerFixed + ')' ) + .css( dir ? 'right' : 'left', 0 ); }, remove : function( c, wo ) { @@ -648,10 +883,18 @@ ts.scroller = { c.$table .off( namespace ) .insertBefore( $wrap ) - .find( 'thead' ).show() - .children( 'tr.' + tscss.headerRow ).children().attr( 'tabindex', 0 ) + .find( 'thead' ) + .removeClass( tscss.scrollerHideElement ) + .children( 'tr.' + tscss.headerRow ) + .children() + .attr( 'tabindex', 0 ) .end() - .find( '.' + tscss.filterRow ).show().removeClass( tscss.filterRowHide ); + .find( '.' + tscss.filterRow ) + .removeClass( tscss.scrollerHideElement + ' ' + tscss.filterRowHide ); + c.$table + .find( '.' + tscss.filter ) + .not( '.' + tscss.filterDisabled ) + .prop( 'disabled', false ); $wrap.remove(); $( window ).off( namespace ); c.isScrolling = false;