r1033 - in branches/dev/grid: tests/visual ui
Author: paul.bakaus
Date: Mon Dec 1 08:11:44 2008
New Revision: 1033
Modified:
branches/dev/grid/tests/visual/grid.html
branches/dev/grid/ui/ui.grid.js
branches/dev/grid/ui/ui.infiniteScrolling.js
Log:
infiniteScrolling: added "restart" method
grid:
- fixed column sorting for infinite scrolling
- added allocateRows option (default: true)
- improved visual demo to show 3 different configurations (infinite
scrolling, finite scrolling, pagination)
Modified: branches/dev/grid/tests/visual/grid.html
==============================================================================
--- branches/dev/grid/tests/visual/grid.html (original)
+++ branches/dev/grid/tests/visual/grid.html Mon Dec 1 08:11:44 2008
@@ -55,6 +55,7 @@
.ui-grid-column div {
padding: 3px;
+ height: 16px;
}
@@ -68,9 +69,22 @@
url: "../data/employees-json.php",
limit: 20,
height: 200,
- toolbar: false,
pagination: false
});
+
+ $("#grid2").grid({
+ url: "../data/employees-json.php",
+ limit: 20,
+ height: 200,
+ pagination: false,
+ allocateRows: false
+ });
+
+ $("#grid3").grid({
+ url: "../data/employees-json.php",
+ limit: 20,
+ height: 200
+ });
});
@@ -81,7 +95,14 @@
</head>
<body>
+ <h2>Grid with finite scrolling</h2>
<div id="grid"></div>
+
+ <h2>Grid with infinite scrolling</h2>
+ <div id="grid2"></div>
+
+ <h2>Grid with pagination</h2>
+ <div id="grid3"></div>
</body>
</html>
Modified: branches/dev/grid/ui/ui.grid.js
==============================================================================
--- branches/dev/grid/ui/ui.grid.js (original)
+++ branches/dev/grid/ui/ui.grid.js Mon Dec 1 08:11:44 2008
@@ -85,31 +85,34 @@
//Generate content element and table
this.content = $('<tr><td><div class="ui-grid-content"
style="width:'+this.options.width+'px;
height: '+this.options.height+'px;"><table cellpadding="0"
cellspacing="0"><tbody></tbody></table></div></td></tr>')
.appendTo(this.grid).find('tbody');
+
+ this.contentDiv = $('.ui-grid-content', this.grid);
//Generate footer
if(this.options.footer)
this._generateFooter();
-
//Prepare data
this.gridmodel = $.ui.grid.model({
url: this.options.url
});
+ //Call update for the first time
this._update({ columns: true });
//Event bindings
this.grid
- .bind('click', function(event) {
+ .bind('click.grid', function(event) {
return self._handleClick.call(self, event);
})
- .bind('mousemove', function(event) {
+ .bind('mousemove.grid', 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;
- });
+ this.contentDiv
+ .bind('scroll.grid', function(event) {
+ $('div.ui-grid-columns-constrainer', this.grid)[0].scrollLeft =
this.scrollLeft;
+ });
//Selection of rows
this._makeRowsSelectable();
@@ -143,7 +146,7 @@
var data = $.data(event.target.parentNode, 'grid-column-header');
this.sortDirection = this.sortDirection == 'desc' ? 'asc' : 'desc';
this.sortColumn = data.id;
- this._update({ columns: false });
+ this._update({ columns: false, refresh: true });
}
if($(event.target).is('a.ui-grid-pagination')) {
@@ -187,68 +190,84 @@
_update: function(o) {
- var self = this;
- var options = { limit: this.options.limit };
+ var self = this,
+ options = $.extend({}, o, {
+ limit: this.options.limit,
+ start: (!(o && o.refresh) && this.offset) || 0,
+ refresh: (o && o.refresh) || (o && o.columns)
+ }),
+ fetchOptions = $.extend({}, options, { fill: null });
+
+ if(options.refresh) {
+ fetchOptions.start = self.infiniteScrolling ? 0 : (this.offset || 0);
+ }
- options.start = this.offset || 0;
- if(this.sortColumn) options.sortColumn = this.sortColumn;
- if(this.sortDirection) options.sortDirection = this.sortDirection;
+ //Somehow the keys for these must stay undefined no matter what
+ if(this.sortColumn) fetchOptions.sortColumn = this.sortColumn;
+ if(this.sortDirection) fetchOptions.sortDirection = this.sortDirection;
- this.gridmodel.fetch(options, function(response) {
+ //Do the ajax call
+ this.gridmodel.fetch(fetchOptions, function(response) {
- //Generate pagination
+ //Generate or update pagination
if(self.options.pagination && !self.pagination) {
self._generatePagination(response);
} else if(self.options.pagination && self.pagination) {
self._updatePagination(response);
}
-
- if(!self.infiniteScrolling)
+ //Empty the content if we either use pagination or we have to restart
infinite scrolling
+ if(!self.infiniteScrolling || options.refresh)
self.content.empty();
- if(o && o.columns) {
+ //Empty the columns
+ if(options.refresh) {
self.columnsContainer.empty();
self._addColumns(response.columns);
}
- if(self.infiniteScrolling) {
+ //If infiniteScrolling is used and there's no full refresh, fill rows
+ if(self.infiniteScrolling && !options.refresh) {
var data = [];
for (var i=0; i < response.records.length; i++) {
data.push(self._addRow(response.records[i]));
};
- o.fill({
- chunk: o.chunk,
+ options.fill({
+ chunk: options.chunk,
data: data
});
- } else {
+ } else { //otherwise, simply append the rows to the now emptied list
for (var i=0; i < response.records.length; i++) {
self._addRow(response.records[i]);
};
self._syncColumnWidth();
+
+ //If we're using infinite scrolling, we have to restart it
+ if(self.infiniteScrolling) {
+ self.contentDiv.infiniteScrolling('restart');
+ }
}
-
+
//Initiate infinite scrolling if we don't use pagination and total
records exceed the displayed records
if(!self.infiniteScrolling && !self.options.pagination &&
self.options.limit < response.totalRecords) {
self.infiniteScrolling = true;
- self.infiniteScrollingJustInitiated = true;
- $('div.ui-grid-content', self.grid).infiniteScrolling({
- total: response.totalRecords,
+ self.contentDiv.infiniteScrolling({
+ total: self.options.allocateRows ? response.totalRecords : false,
chunk: self.options.chunk,
scroll: function(e, ui) {
self.offset = ui.start;
self._update({ fill: ui.fill, chunk: ui.chunk });
},
update: function(e, ui) {
- $('div.ui-grid-limits', self.footer).html('Result ' + ui.firstItem
+ '-' + ui.lastItem + ' of ' + ui.total);
+ $('div.ui-grid-limits', self.footer).html('Result ' + ui.firstItem
+ '-' + ui.lastItem + (ui.total ? ' of '+ui.total : ''));
}
});
@@ -320,10 +339,11 @@
limit: false,
pagination: true,
+ allocateRows: true, //Only used for infinite scrolling
chunk: 20, //Only used for infinite scrolling
footer: true,
- toolbar: true,
+ toolbar: false,
multipleSelection: true
}
Modified: branches/dev/grid/ui/ui.infiniteScrolling.js
==============================================================================
--- branches/dev/grid/ui/ui.infiniteScrolling.js (original)
+++ branches/dev/grid/ui/ui.infiniteScrolling.js Mon Dec 1 08:11:44 2008
@@ -33,16 +33,22 @@
//Call update the first time to retrieve the first set of rows
this._update();
- this.element.bind('scroll', function(event) {
+ this.element.bind('scroll.infiniteScrolling', function(event) {
if(self.prevScrollTop != this.scrollTop) {
self.prevScrollTop = this.scrollTop;
self._update(event);
}
-
});
},
+ restart: function() {
+
+ this.element.unbind('.infiniteScrolling');
+ this._init();
+
+ },
+
_prepareCache: function() {
this.cache = new Array(this.options.total ? Math.ceil(this.options.total
/ this.options.chunk) : undefined);
@@ -54,7 +60,7 @@
},
_allocateRows: function() {
-
+
var num = this.options.total - $('tr', this.tbody).length;
var colspan = $('tr:eq(0) > td', this.tbody).length;
var newHTML = this.tbody[0].innerHTML;