etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

listView: implement fixed header when scrolling

This commit is contained in:
Brian Federle 2013-10-02 13:52:08 -07:00
parent bee273fb0c
commit 6a74d23db5
1 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui/scripts/ui/widgets/listView.js
View File

@ -1881,6 +1881,43 @@
// Infinite scrolling event
$listView.bind('scroll', function(event) {
var $fixedElems = $listView.find('.toolbar:first, thead:first');
var $fixedContainer = $('<div>').addClass('fixed-container');
$listView.find('.fixed-container').remove();
if ($listView.scrollTop()) {
$fixedElems.addClass('hidden').css({ visibility: 'hidden' }).clone()
.css({
visibility: 'visible',
width: $listView.width()
})
.appendTo($fixedContainer);
$fixedContainer.append($('<table>').append($fixedContainer.find('thead')));
$fixedElems.find('thead').wrap(
$('<table>')
);
$fixedContainer.find('table').width($listView.find('table tbody').width());
$fixedContainer.find('.toolbar').width($listView.find('.toolbar.hidden').outerWidth());
$fixedContainer.find('thead th').each(function() {
var $th = $(this);
var $td = $listView.find('tbody tr:first td').filter(function() {
return $(this).index() === $th.index();
});
$th.width($td.outerWidth());
});
$fixedContainer.css({
position: 'absolute',
width: $fixedElems.outerWidth()
}).prependTo($listView);
} else {
$fixedContainer.remove();
$fixedElems.removeClass('hidden');
$listView.find('.toolbar').css('visibility', 'visible');
$listView.find('thead').css('visibility', 'visible');
}
if (args.listView && args.listView.disableInfiniteScrolling) return false;
if ($listView.find('tr.last, td.loading:visible').size()) return false;