r1017 - branches/dev/grid/ui
Author: paul.bakaus
Date: Fri Nov 28 00:54:16 2008
New Revision: 1017
Modified:
branches/dev/grid/ui/ui.grid.js
branches/dev/grid/ui/ui.infiniteScrolling.js
Log:
grid: use event delegation to add row hovering
infiniteScrolling: better calculation of firstItem/lastItem (still buggy),
report total rows in ui object
Modified: branches/dev/grid/ui/ui.grid.js
==============================================================================
--- branches/dev/grid/ui/ui.grid.js (original)
+++ branches/dev/grid/ui/ui.grid.js Fri Nov 28 00:54:16 2008
@@ -99,9 +99,13 @@
this._update({ columns: true });
//Event bindings
- this.grid.bind('click', function(event) {
- return self._handleClick.call(self, event);
- });
+ this.grid
+ .bind('click', function(event) {
+ return self._handleClick.call(self, event);
+ })
+ .bind('mousemove', function(event) {
+ return self._handleMove.call(self, event);
+ });
$('div.ui-grid-content').bind('scroll', function(event) {
$('div.ui-grid-columns-constrainer', this.grid)[0].scrollLeft =
this.scrollLeft;
@@ -111,6 +115,26 @@
this._makeRowsSelectable();
},
+
+ _handleMove: function(event) {
+
+ //If we're over a table row
+ if($(event.target).parents('.ui-grid-row').length) {
+
+ var target = $(event.target).parents('.ui-grid-row');
+
+ if(this.tableRowHovered && this.tableRowHovered != target[0])
+ $(this.tableRowHovered).removeClass('ui-grid-row-hover');
+
+ target.addClass('ui-grid-row-hover');
+ this.tableRowHovered = target[0];
+
+ } else {
+ if(this.tableRowHovered)
+ $(this.tableRowHovered).removeClass('ui-grid-row-hover');
+ }
+
+ },
_handleClick: function(event) {
@@ -218,13 +242,13 @@
self.infiniteScrollingJustInitiated = true;
$('div.ui-grid-content', self.grid).infiniteScrolling({
total: response.totalRecords,
- block: 10,
+ block: 20,
scroll: function(e, ui) {
self.offset = ui.start;
self._update({ fill: ui.fill, block: ui.block });
},
update: function(e, ui) {
- $('div.ui-grid-limits', self.footer).html('Result ' + ui.firstItem
+ '-' + ui.lastItem + ' of ' +
$(this).infiniteScrolling('option', 'total'));
+ $('div.ui-grid-limits', self.footer).html('Result ' + ui.firstItem
+ '-' + ui.lastItem + ' of ' + ui.total);
}
});
@@ -277,11 +301,6 @@
var row = $('<tr class="ui-grid-row"></tr>');
if(!dontAdd) row.appendTo(this.content);
- row.hover(function() {
- $(this).addClass('ui-grid-row-hover');
- }, function() {
- $(this).removeClass('ui-grid-row-hover');
- });
for (var i=0; i < this.columns.length; i++) {
$('<td class="ui-grid-column
ui-active-state"><div>'+item[this.columns[i].id]+'</div></td>')
Modified: branches/dev/grid/ui/ui.infiniteScrolling.js
==============================================================================
--- branches/dev/grid/ui/ui.infiniteScrolling.js (original)
+++ branches/dev/grid/ui/ui.infiniteScrolling.js Fri Nov 28 00:54:16 2008
@@ -17,7 +17,7 @@
$.widget("ui.infiniteScrolling", {
_init: function() {
-
+
var self = this;
this.tbody = $('> table > tbody', this.element);
this.height = this.element.height();
@@ -28,10 +28,10 @@
//Alocate all rows in this.options.total to change the scrollbar size
this._allocateRows();
-
+
//Call update the first time to retrieve the first set of rows
this._update();
-
+
this.element.bind('scroll', function(event) {
self._update(event);
});
@@ -69,8 +69,8 @@
var start = this.element[0].scrollTop;
var stop = start + this.height;
- var firstItem = Math.floor(start / this.rowHeight);
- var lastItem = Math.ceil(stop / this.rowHeight);
+ var firstItem = Math.floor((start+this.rowHeight) / this.rowHeight);
+ var lastItem = Math.floor(stop / this.rowHeight); //Usually we should
use 'ceil' here, but to accomodate the bottom scrollbar, we use floor
var firstBlock = Math.round(firstItem / this.options.block);
var lastBlock = Math.round(lastItem / this.options.block);
@@ -81,11 +81,11 @@
if(this.cache[i]) continue;
this.cache[i] = (new Date()).getTime(); //TODO: Revalidation option
- this._trigger('scroll', event, { block: i, start: i *
this.options.block, fill: function() { return self.fill.apply(self,
arguments); } });
+ this._trigger('scroll', event, { total: this.options.total, block: i,
start: i * this.options.block, fill: function() { return
self.fill.apply(self, arguments); } });
};
- this._trigger('update', event, { firstBlock: firstBlock, lastBlock:
lastBlock, firstItem: firstItem, lastItem: lastItem });
+ this._trigger('update', event, { firstBlock: firstBlock, lastBlock:
lastBlock, firstItem: firstItem, lastItem: lastItem, total:
this.options.total });
},