r802 - in branches/1.7: . tests tests/visual
Author: paul.bakaus
Date: Thu Oct 16 03:14:36 2008
New Revision: 802
Modified:
branches/1.7/tests/grid.html
branches/1.7/tests/grid.js
branches/1.7/tests/visual/grid.html
branches/1.7/ui.grid.js
Log:
grid: fixed tests, more defaults, some theming optimizations (long way to
go..)
Modified: branches/1.7/tests/grid.html
==============================================================================
--- branches/1.7/tests/grid.html (original)
+++ branches/1.7/tests/grid.html Thu Oct 16 03:14:36 2008
@@ -8,6 +8,9 @@
<script type="text/javascript"
src="../../../trunk/jquery-1.2.6.js"></script>
<script type="text/javascript"
src="../../../trunk/ui/ui.core.js"></script>
<script type="text/javascript" src="../ui.grid.js"></script>
+ <script type="text/javascript" src="../ui.gridmodel.js"></script>
+
+
<script type="text/javascript"
src="../../../trunk/tests/qunit/testrunner.js"></script>
<script type="text/javascript"
src="../../../trunk/tests/simulate/jquery.simulate.js"></script>
Modified: branches/1.7/tests/grid.js
==============================================================================
--- branches/1.7/tests/grid.js (original)
+++ branches/1.7/tests/grid.js Thu Oct 16 03:14:36 2008
@@ -54,7 +54,13 @@
test("defaults", function() {
var el = $("#grid").grid();
- equals(el.data("foo.grid"), "bar", "foo");
+ equals(el.data("width.grid"), 400, "width");
+ equals(el.data("height.grid"), 300, "height");
+ equals(el.data("limit.grid"), false, "limit");
+ equals(el.data("footer.grid"), true, "footer");
+ equals(el.data("toolbar.grid"), true, "toolbar");
+ equals(el.data("pagination.grid"), true, "pagination");
+
});
Modified: branches/1.7/tests/visual/grid.html
==============================================================================
--- branches/1.7/tests/visual/grid.html (original)
+++ branches/1.7/tests/visual/grid.html Thu Oct 16 03:14:36 2008
@@ -50,6 +50,7 @@
.ui-grid-column-header div {
padding: 3px;
+ overflow: hidden;
}
.ui-grid-column {
Modified: branches/1.7/ui.grid.js
==============================================================================
--- branches/1.7/ui.grid.js (original)
+++ branches/1.7/ui.grid.js Thu Oct 16 03:14:36 2008
@@ -2,20 +2,33 @@
$.widget('ui.grid', {
+ _generateToolbar: function() {
+
+ this.toolbar = $('<tr
class="ui-grid-toolbar"><td>Toolbar</td></tr>').appendTo(this.grid);
+ this.toolbar = $('td', this.toolbar);
+
+ },
+
+ _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);
+ this.columnsContainer = $('table tr', this.columnsContainer);
+
+ },
+
+ _generateFooter: function() {
+
+ this.footer = $('<tr class="ui-grid-footer"><td>'+
+ '<div class="ui-grid-footer-text ui-grid-limits"></div>'+
+ '</td></tr>').appendTo(this.grid);
+
+ this.footer = $('td', this.footer);
+
+ },
+
_init: function() {
var self = this;
-
- //Find the right stylesheet for modifying
- loop1: for (var i=0; i < document.styleSheets.length; i++) {
- var rules = document.styleSheets[i].rules ||
document.styleSheets[i].cssRules;
- for (var j=0; j < rules.length; j++) {
- if(rules[j].selectorText == "#uiGridLogic") {
- this.stylesheet = document.styleSheets[i];
- break loop1;
- }
- };
- };
//Generate the grid element
this.grid = $('<table class="ui-grid" cellpadding="0" cellspacing="0"
width="100%" height="100%"></table>')
@@ -25,23 +38,21 @@
//Generate toolbar
if(this.options.toolbar) {
- this.toolbar = $('<tr class="ui-grid-footer"><td>Toolbar</td></tr>')
- .appendTo(this.grid);
- this.toolbar = $('td', this.toolbar);
+ this._generateToolbar();
}
+ //Generate columns
+ this._generateColumns();
+
//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"></table></div></td></tr>')
.appendTo(this.grid);
this.content = $('table', this.content);
-
//Generate footer
if(this.options.footer) {
- this.footer = $('<tr class="ui-grid-footer"><td><div
class="ui-grid-total-records ui-grid-footer-text"></div></td></tr>')
- .appendTo(this.grid);
- this.footer = $('td', this.footer);
+ this._generateFooter();
}
@@ -70,7 +81,7 @@
var self = this;
var options = { limit: this.options.limit };
- if(this.offset) options.start = this.offset;
+ options.start = this.offset || 0;
if(this.sortColumn) options.sortColumn = this.sortColumn;
if(this.sortDirection) options.sortDirection = this.sortDirection;
@@ -78,49 +89,44 @@
if(o && o.columns) {
self.content.empty();
+ self.columnsContainer.empty();
self._addColumns(response.columns);
} else {
- $('tr.ui-grid-row', self.content).remove();
+ self.content.empty();
}
for (var i=0; i < response.records.length; i++) {
self._addRow(response.records[i]);
};
- $('div.ui-grid-total-records', self.footer).html(response.totalRecords);
+ self._updateColumnHeaderSize();
+
+ $('div.ui-grid-limits', self.footer).html('Result ' + options.start
+ '-' + (options.start + options.limit) + ' of ' + response.totalRecords);
});
},
- _addRule: function(rule,value) {
- $.browser.mozilla ? this.stylesheet.insertRule(rule+' { '+value+'
}',0) : this.stylesheet.addRule(rule,value,0);
- },
-
- _changeRule: function(selector, key, value) {
+ _updateColumnHeaderSize: function() {
+
+ var testTR = $('tr:first td', this.content);
+
+ 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
- var rules = this.stylesheet.rules || this.stylesheet.cssRules;
- for (var j=0; j < rules.length; j++) {
- if(rules[j].selectorText == selector) {
- rules[j].style[key] = value;
- return;
- }
};
-
+
},
- _columnIdentifiers: [],
- _columnIdentifiersCounter: 1,
_addColumns: function(item) {
this.columns = item;
- var row = $('<tr class="ui-grid-header ui-grid-inner"></tr>')
- .appendTo(this.content);
for (var i=0; i < item.length; i++) {
var column = $('<td
class="ui-grid-column-header"><div>'+item[i].label+'</div></td>')
.data('grid-column-header', item[i])
- .appendTo(row);
+ .appendTo(this.columnsContainer);
};
},
@@ -147,7 +153,10 @@
defaults: {
width: 400,
height: 300,
+
limit: false,
+ pagination: true,
+
footer: true,
toolbar: true
}