r1013 - branches/dev/grid/ui
Author: paul.bakaus
Date: Wed Nov 26 02:58:41 2008
New Revision: 1013
Modified:
branches/dev/grid/ui/ui.grid.js
Log:
grid: implemented fixed column width, improvements to fixed column headers
and scrolling (still needs the little box at the end of the column headers
to serve as scrollbar placeholder)
Modified: branches/dev/grid/ui/ui.grid.js
==============================================================================
--- branches/dev/grid/ui/ui.grid.js (original)
+++ branches/dev/grid/ui/ui.grid.js Wed Nov 26 02:58:41 2008
@@ -8,8 +8,13 @@
},
_generateColumns: function() {
- this.columnsContainer = $('<tr class="ui-grid-columns"><td><table
cellpadding="0" cellspacing="0"><tr class="ui-grid-header
ui-grid-inner"></tr></table></td></tr>')
- .appendTo(this.grid).find('table tr');
+ this.columnsContainer = $('<tr class="ui-grid-columns"><td><div
class="ui-grid-columns-constrainer"><table cellpadding="0"
cellspacing="0"><tbody><tr class="ui-grid-header
ui-grid-inner"></tr></tbody></table></div></td></tr>')
+ .appendTo(this.grid).find('table tbody tr');
+
+ $('.ui-grid-columns-constrainer', this.grid).css({
+ width: this.options.width,
+ overflow: 'hidden'
+ });
},
_generateFooter: function() {
@@ -19,7 +24,7 @@
},
_generatePagination: function(response) {
- this.pagination = $('<div
class="ui-grid-footer-text"></div>').appendTo(this.footer);
+ this.pagination = $('<div class="ui-grid-footer-text" style="float:
right;"></div>').appendTo(this.footer);
var pages = Math.round(response.totalRecords/this.options.limit);
this._updatePagination(response);
},
@@ -54,6 +59,9 @@
if($.inArray(pages, displayed) == -1) //Show the last if it's not
already shown
this.pagination.append('<a href="#"
class="ui-grid-pagination">'+pages+'</a>');
+
+ this.pagination.prepend(current-1 > 0 ? '<a href="#"
class="ui-grid-pagination"><<</a>' : '<span
class="ui-grid-pagination"><<</span>');
+ this.pagination.append(current+1 > pages ? '<span
class="ui-grid-pagination">>></span>' : '<a href="#"
class="ui-grid-pagination">>></a>');
},
@@ -92,7 +100,11 @@
//Event bindings
this.grid.bind('click', function(event) {
- self._handleClick.call(self, event);
+ return self._handleClick.call(self, event);
+ });
+
+ $('div.ui-grid-content').bind('scroll', function(event) {
+ $('div.ui-grid-columns-constrainer', this.grid)[0].scrollLeft =
this.scrollLeft;
});
//Selection of rows
@@ -110,14 +122,22 @@
this._update({ columns: false });
}
- if($(event.target).is('.ui-grid-pagination')) {
- this.offset = (parseInt(event.target.innerHTML,10)-1) *
this.options.limit;
+ if($(event.target).is('a.ui-grid-pagination')) {
+ var html = event.target.innerHTML, current = Math.round(this.offset /
this.options.limit) + 1;
+ if(html == '>>') current = current+1;
+ if(html == '<<') current = current-1;
+ if(!isNaN(parseInt(event.target.innerHTML,10))) current =
parseInt(event.target.innerHTML,10);
+
+ this.offset = (current-1) * this.options.limit;
this._update();
}
+
+ return false;
},
_makeRowsSelectable: function() {
+
this.content.parent().parent().selectable({
filter: 'tr',
multiple: this.options.multipleSelection,
@@ -138,6 +158,7 @@
}
});
+
},
_update: function(o) {
@@ -170,7 +191,7 @@
self._addRow(response.records[i]);
};
- self._updateColumnHeaderSize();
+ self._syncColumnWidth();
$('div.ui-grid-limits', self.footer)
.html('Result ' + options.start + '-' + (options.start +
options.limit) + ' of ' + response.totalRecords);
@@ -179,25 +200,34 @@
},
- _updateColumnHeaderSize: function() {
+ _syncColumnWidth: function() {
var testTR = $('tr:first td', this.content);
+ var totalWidth = 0;
+
for (var i=0; i < this.columns.length; i++) {
- $('td:eq('+i+')',
this.columnsContainer).add(testTR[i]).width(testTR[i].offsetWidth);
- $('td:eq('+i+') div',
this.columnsContainer).width(testTR[i].offsetWidth - 10); //TODO: Subtract
real paddings of inner divs
+ $(testTR[i]).width($('td:eq('+i+')',
this.columnsContainer)[0].style.width);
+ totalWidth += parseInt($('td:eq('+i+')',
this.columnsContainer)[0].style.width, 10);
+ //$('td:eq('+i+') div',
this.columnsContainer).width(testTR[i].offsetWidth - 10); //TODO: Subtract
real paddings of inner divs
};
+
+ this.content.parent().width(totalWidth);
},
_addColumns: function(item) {
this.columns = item;
-
+ var totalWidth = 0;
for (var i=0; i < item.length; i++) {
var column = $('<td class="ui-grid-column-header
ui-default-state"><div>'+item[i].label+'</div></td>')
+ .width(item[i].width)
.data('grid-column-header', item[i])
.appendTo(this.columnsContainer);
+ totalWidth += item[i].width;
};
+
+ this.columnsContainer.parent().parent().width(totalWidth);
},