stickyheaders scroll left now

This commit is contained in:
Rob Garrison 2011-12-06 09:25:51 -06:00
parent 09752c6ab5
commit 16c2108cd0
4 changed files with 31 additions and 15 deletions

View File

@ -34,6 +34,10 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt). View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt).
####Version 2.0.23.4 (2011-12-6)
* Updated the sticky header widget to reposition the sticky header when scrolling left. Fix for [issue #9](https://github.com/Mottie/tablesorter/issues/9).
#### Version 2.0.23.3 (2011-11-7) #### Version 2.0.23.3 (2011-11-7)
* Updated the filter widget: * Updated the filter widget:

View File

@ -1,5 +1,10 @@
TableSorter Change Log TableSorter Change Log
Version 2.0.23.4 (2011-12-6)
============================
* Updated the sticky header widget to reposition the sticky header when scrolling left. Fix for [issue #9](https://github.com/Mottie/tablesorter/issues/9).
Version 2.0.23.3 (2011-11-7) Version 2.0.23.3 (2011-11-7)
============================ ============================

View File

@ -1,4 +1,4 @@
/* TableSorter 2.0 Widgets - updated 11/7/2011 /* TableSorter 2.0 Widgets - updated 12/6/2011
* *
* jQuery UI Theme * jQuery UI Theme
* Column Styles * Column Styles
@ -154,7 +154,8 @@ $.tablesorter.addWidget({
id: "stickyHeaders", id: "stickyHeaders",
format: function(table) { format: function(table) {
if ($(table).find('.stickyHeader').length) { return; } if ($(table).find('.stickyHeader').length) { return; }
var win = $(window), var $table = $(table),
win = $(window),
header = $(table).find('thead'), header = $(table).find('thead'),
hdrCells = header.find('tr').children(), hdrCells = header.find('tr').children(),
brdr = parseInt(hdrCells.eq(0).css('border-left-width'),10), brdr = parseInt(hdrCells.eq(0).css('border-left-width'),10),
@ -170,7 +171,7 @@ $.tablesorter.addWidget({
}), }),
stkyCells = sticky.children(); stkyCells = sticky.children();
// update sticky header class names to match real header // update sticky header class names to match real header
$(table).bind('sortEnd', function(e,t){ $table.bind('sortEnd', function(e,t){
var th = $(t).find('thead tr'), var th = $(t).find('thead tr'),
sh = th.filter('.stickyHeader').children(); sh = th.filter('.stickyHeader').children();
th.filter(':not(.stickyHeader)').children().each(function(i){ th.filter(':not(.stickyHeader)').children().each(function(i){
@ -197,14 +198,19 @@ $.tablesorter.addWidget({
// make it sticky! // make it sticky!
win win
.scroll(function(){ .scroll(function(){
var $t = $(table), var offset = $table.offset(),
offset = $t.offset(),
sTop = win.scrollTop(), sTop = win.scrollTop(),
vis = ((sTop > offset.top) && (sTop < offset.top + $t.find('tbody').height())) ? 'visible' : 'hidden'; vis = ((sTop > offset.top) && (sTop < offset.top + $table.find('tbody').height())) ? 'visible' : 'hidden';
sticky.css('visibility', vis); sticky.css({
left : offset.left - win.scrollLeft(),
visibility : vis
});
}) })
.resize(function(){ .resize(function(){
sticky.css({ width: header.outerWidth() + brdr * 2 }); sticky.css({
left : $(table).offset().left - win.scrollLeft(),
width: header.outerWidth() + brdr * 2
});
stkyCells.each(function(i){ stkyCells.each(function(i){
$(this).width( hdrCells.eq(i).width() ); $(this).width( hdrCells.eq(i).width() );
}); });

View File

@ -1,8 +1,9 @@
/* TableSorter 2.0 Widgets - updated 11/7/2011 */ /* TableSorter 2.0 Widgets - updated 12/6/2011 */
(function(c){
c.tablesorter.addWidget({id:"uitheme",format:function(f){var b,a,g,e=f.config,d=["ui-icon-arrowthick-2-n-s","ui-icon-arrowthick-1-s","ui-icon-arrowthick-1-n"];e.widgetUitheme&&e.widgetUitheme.hasOwnProperty("css")&&(d=e.widgetUitheme.css||d);g=d.join(" ");e.debug&&(b=new Date);c(f).is(".ui-theme")||(c(f).addClass("ui-widget ui-widget-content ui-corner-all ui-theme"),c.each(e.headerList,function(){c(this).addClass("ui-widget-header ui-corner-all").append('<span class="ui-icon"/>').hover(function(){c(this).addClass("ui-state-hover")}, function(){c(this).removeClass("ui-state-hover")})}));c.each(e.headerList,function(b){e.headers[b]&&e.headers[b].sorter===false?c(this).find("span.ui-icon").removeClass(g+" ui-icon"):(a=c(this).is("."+e.cssAsc)?d[1]:c(this).is("."+e.cssDesc)?d[2]:c(this).is("."+e.cssHeader)?d[0]:"",c(this)[a===d[0]?"removeClass":"addClass"]("ui-state-active").find("span.ui-icon").removeClass(g).addClass(a))});e.debug&&c.tablesorter.benchmark("Applying uitheme widget",b)}}); (function(a){
c.tablesorter.addWidget({id:"columns",format:function(f){var b, a,g,e,d=f.config,i=d.sortList,h=i.length,j=["primary","secondary","tertiary"];d.widgetColumns&&d.widgetColumns.hasOwnProperty("css")&&(j=d.widgetColumns.css||j);g=j.length-1;e=j.join(" ");d.debug&&(a=new Date);i&&i[0]&&c("tr:visible",f.tBodies[0]).each(function(a){b=c(this).children().removeClass(e);b.eq(i[0][0]).addClass(j[0]);if(h>1)for(a=1;a<h;a++)b.eq(i[a][0]).addClass(j[a]||j[g])});d.debug&&c.tablesorter.benchmark("Applying Columns widget",a)}}); a.tablesorter.addWidget({id:"uitheme",format:function(d){var c,b,g,f=d.config,e=["ui-icon-arrowthick-2-n-s","ui-icon-arrowthick-1-s","ui-icon-arrowthick-1-n"];f.widgetUitheme&&f.widgetUitheme.hasOwnProperty("css")&&(e=f.widgetUitheme.css||e);g=e.join(" ");f.debug&&(c=new Date);a(d).is(".ui-theme")||(a(d).addClass("ui-widget ui-widget-content ui-corner-all ui-theme"),a.each(f.headerList,function(){a(this).addClass("ui-widget-header ui-corner-all").append('<span class="ui-icon"/>').hover(function(){a(this).addClass("ui-state-hover")}, function(){a(this).removeClass("ui-state-hover")})}));a.each(f.headerList,function(c){f.headers[c]&&!1===f.headers[c].sorter?a(this).find("span.ui-icon").removeClass(g+" ui-icon"):(b=a(this).is("."+f.cssAsc)?e[1]:a(this).is("."+f.cssDesc)?e[2]:a(this).is("."+f.cssHeader)?e[0]:"",a(this)[b===e[0]?"removeClass":"addClass"]("ui-state-active").find("span.ui-icon").removeClass(g).addClass(b))});f.debug&&a.tablesorter.benchmark("Applying uitheme widget",c)}});
c.tablesorter.addWidget({id:"filter",format:function(f){if(!f.config.filtering){var b, a,g,e,d,i,h=f.config,j=h.headerList.length,k=c(f),f='<tr class="filters">',l;h.debug&&(l=new Date);for(b=0;b<j;b++)f+='<td><input type="text" class="filter" data-col="'+b+'" style="',f+=h.headers[b]&&"filter"in h.headers[b]&&h.headers[b].filter===false||c(h.headerList[b]).is(".filter-false")?"display:none":"",f+='"></td>';k.find("thead").append(f+="</tr>").find(".filter").bind("keyup",function(){a=k.find(".filter").map(function(){return(c(this).val()||"").toLowerCase()}).get();a.join("")===""?k.find("tr").show(): k.find("tbody").find("tr:not(.expand-child)").each(function(){g=true;d=c(this).nextUntil("tr:not(.expand-child)");e=d.length&&(typeof h.widgetFilterChildRows!=="undefined"?h.widgetFilterChildRows:1)?d.text():"";i=c(this).find("td");for(b=0;b<j;b++)a[b]!==""&&(i.eq(b).text()+e).toLowerCase().indexOf(a[b])>=0?g=g?true:false:a[b]!==""&&(g=false);c(this)[g?"show":"hide"]();if(d.length)d[g?"show":"hide"]()});k.trigger("applyWidgets")});h.filtering=true;h.debug&&c.tablesorter.benchmark("Applying Filter widget", l)}}}); a.tablesorter.addWidget({id:"columns",format:function(d){var c, b,g,f,e=d.config,i=e.sortList,h=i.length,j=["primary","secondary","tertiary"];e.widgetColumns&&e.widgetColumns.hasOwnProperty("css")&&(j=e.widgetColumns.css||j);g=j.length-1;f=j.join(" ");e.debug&&(b=new Date);i&&i[0]&&a("tr:visible",d.tBodies[0]).each(function(b){c=a(this).children().removeClass(f);c.eq(i[0][0]).addClass(j[0]);if(1<h)for(b=1;b<h;b++)c.eq(i[b][0]).addClass(j[b]||j[g])});e.debug&&a.tablesorter.benchmark("Applying Columns widget",b)}});
c.tablesorter.addWidget({id:"stickyHeaders",format:function(f){if(!c(f).find(".stickyHeader").length){var b=c(window),a=c(f).find("thead"),g=a.find("tr").children(),e=parseInt(g.eq(0).css("border-left-width"),10),d=a.find("tr").clone().addClass("stickyHeader").css({width:a.outerWidth()+e*2,position:"fixed",top:0,marginLeft:-e,visibility:"hidden",zIndex:10}),i=d.children();c(f).bind("sortEnd",function(a,b){var d=c(b).find("thead tr"),f=d.filter(".stickyHeader").children();d.filter(":not(.stickyHeader)").children().each(function(a){f.eq(a).attr("class", c(this).attr("class"))})});g.each(function(a){var b=c(this);i.eq(a).width(b.width()).bind("click",function(a){b.trigger(a)}).bind("mousedown",function(){this.onselectstart=function(){return false};return false})});a.prepend(d);b.scroll(function(){var a=c(f),e=a.offset(),g=b.scrollTop(),a=g>e.top&&g<e.top+a.find("tbody").height()?"visible":"hidden";d.css("visibility",a)}).resize(function(){d.css({width:a.outerWidth()+e*2});i.each(function(a){c(this).width(g.eq(a).width())})})}}}); a.tablesorter.addWidget({id:"filter",format:function(d){if(!d.config.filtering){var c, b,g,f,e,i,h=d.config,j=h.headerList.length,k=a(d),d='<tr class="filters">',l;h.debug&&(l=new Date);for(c=0;c<j;c++)d+='<td><input type="text" class="filter" data-col="'+c+'" style="',d+=h.headers[c]&&"filter"in h.headers[c]&&!1===h.headers[c].filter||a(h.headerList[c]).is(".filter-false")?"display:none":"",d+='"></td>';k.find("thead").append(d+="</tr>").find(".filter").bind("keyup",function(){b=k.find(".filter").map(function(){return(a(this).val()||"").toLowerCase()}).get();""===b.join("")?k.find("tr").show(): k.find("tbody").find("tr:not(.expand-child)").each(function(){g=!0;e=a(this).nextUntil("tr:not(.expand-child)");f=e.length&&("undefined"!==typeof h.widgetFilterChildRows?h.widgetFilterChildRows:1)?e.text():"";i=a(this).find("td");for(c=0;c<j;c++)""!==b[c]&&0<=(i.eq(c).text()+f).toLowerCase().indexOf(b[c])?g=g?!0:!1:""!==b[c]&&(g=!1);a(this)[g?"show":"hide"]();if(e.length)e[g?"show":"hide"]()});k.trigger("applyWidgets")});h.filtering=!0;h.debug&&a.tablesorter.benchmark("Applying Filter widget",l)}}});
c.tablesorter.addWidget({id:"resizable", format:function(f){if(!f.config.resizable){var b,a=f.config,g=a.headerList,e=g.length,d=function(){a.resizable_position=0;a.resizable_target=null;c(window).trigger("resize")};a.resizable_target=null;a.resizable_position=0;for(b=1;b<e;b++)c(g[b]).append('<div class="resizer" style="cursor:w-resize;position:absolute;height:100%;width:20px;left:-20px;top:0;z-index:1;"></div>').wrapInner('<div style="position:relative;height:100%;width:100%"></div>').find(".resizer").bind("mousedown",function(b){a.resizable_target= c(b.target).closest("th");a.resizable_position=b.pageX}).end().bind("mousemove",function(c){if(!(a.resizable_position===0||typeof a.resizable_target===null)){var b=c.pageX-a.resizable_position,d=a.resizable_target.closest("th").prev();if(!(a.resizable_target.width()<-b||d&&d.width()<=b))d.width(d.width()+b),a.resizable_position=c.pageX}}).bind("mouseup",function(){d();return false});c(f).find("thead").bind("mouseup mouseleave",function(){d()});a.resizable=true}}}) a.tablesorter.addWidget({id:"stickyHeaders",format:function(d){if(!a(d).find(".stickyHeader").length){var c=a(d),b=a(window),g=a(d).find("thead"),f=g.find("tr").children(),e=parseInt(f.eq(0).css("border-left-width"),10),i=g.find("tr").clone().addClass("stickyHeader").css({width:g.outerWidth()+2*e,position:"fixed",top:0,marginLeft:-e,visibility:"hidden",zIndex:10}),h=i.children();c.bind("sortEnd",function(b,c){var d=a(c).find("thead tr"),e=d.filter(".stickyHeader").children();d.filter(":not(.stickyHeader)").children().each(function(b){e.eq(b).attr("class", a(this).attr("class"))})});f.each(function(b){var c=a(this);h.eq(b).width(c.width()).bind("click",function(b){c.trigger(b)}).bind("mousedown",function(){this.onselectstart=function(){return!1};return!1})});g.prepend(i);b.scroll(function(){var a=c.offset(),d=b.scrollTop(),d=d>a.top&&d<a.top+c.find("tbody").height()?"visible":"hidden";i.css({left:a.left-b.scrollLeft(),visibility:d})}).resize(function(){i.css({left:a(d).offset().left-b.scrollLeft(),width:g.outerWidth()+2*e});h.each(function(b){a(this).width(f.eq(b).width())})})}}});
a.tablesorter.addWidget({id:"resizable",format:function(d){if(!d.config.resizable){var c,b=d.config,g=b.headerList,f=g.length,e=function(){b.resizable_position=0;b.resizable_target=null;a(window).trigger("resize")};b.resizable_target=null;b.resizable_position=0;for(c=1;c<f;c++)a(g[c]).append('<div class="resizer" style="cursor:w-resize;position:absolute;height:100%;width:20px;left:-20px;top:0;z-index:1;"></div>').wrapInner('<div style="position:relative;height:100%;width:100%"></div>').find(".resizer").bind("mousedown", function(c){b.resizable_target=a(c.target).closest("th");b.resizable_position=c.pageX}).end().bind("mousemove",function(a){if(!(0===b.resizable_position||null===typeof b.resizable_target)){var c=a.pageX-b.resizable_position,d=b.resizable_target.closest("th").prev();if(!(b.resizable_target.width()<-c||d&&d.width()<=c))d.width(d.width()+c),b.resizable_position=a.pageX}}).bind("mouseup",function(){e();return!1});a(d).find("thead").bind("mouseup mouseleave",function(){e()});b.resizable=!0}}})
})(jQuery); })(jQuery);