r809 - in branches/1.7: . tests/visual
Author: paul.bakaus
Date: Mon Oct 20 03:27:36 2008
New Revision: 809
Modified:
branches/1.7/tests/visual/grid.html
branches/1.7/ui.grid.js
Log:
grid: code cleanup
Modified: branches/1.7/tests/visual/grid.html
==============================================================================
--- branches/1.7/tests/visual/grid.html (original)
+++ branches/1.7/tests/visual/grid.html Mon Oct 20 03:27:36 2008
@@ -8,6 +8,7 @@
<script type="text/javascript" src="../../ui.grid.js"></script>
<script type="text/javascript" src="../../ui.gridmodel.js"></script>
<script type="text/javascript" src="../../ui.selectable.js"></script>
+ <script type="text/javascript"
src="../../../../trunk/ui/ui.sortable.js"></script>
<style type="text/css" media="screen">
@@ -52,6 +53,7 @@
.ui-grid-column-header div {
padding: 3px;
overflow: hidden;
+ cursor: pointer;
}
.ui-grid-column {
@@ -82,7 +84,8 @@
$("#grid").grid({
url: "../data/employees-json.php",
limit: 10,
- height: 200
+ height: 200,
+ toolbar: false
});
});
Modified: branches/1.7/ui.grid.js
==============================================================================
--- branches/1.7/ui.grid.js (original)
+++ branches/1.7/ui.grid.js Mon Oct 20 03:27:36 2008
@@ -3,27 +3,19 @@
$.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);
-
+ 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');
},
_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);
-
+ '</td></tr>').appendTo(this.grid).find('td');
},
_init: function() {
@@ -35,11 +27,9 @@
.css({ width: this.options.width })
.appendTo(this.element);
-
//Generate toolbar
- if(this.options.toolbar) {
+ if(this.options.toolbar)
this._generateToolbar();
- }
//Generate columns
this._generateColumns();
@@ -47,42 +37,52 @@
//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);
- this.content = $('tbody', this.content);
+ .appendTo(this.grid).find('tbody');
//Generate footer
- if(this.options.footer) {
+ if(this.options.footer)
this._generateFooter();
- }
+
+ //Prepare data
this.gridmodel = $.ui.grid.model({
url: this.options.url
});
this._update({ columns: true });
+ //Event bindings
this.grid.bind('click', function(e) {
-
- //Click on column header toggles sorting
- if($(e.target.parentNode).is('.ui-grid-column-header')) {
- var data = $.data(e.target.parentNode, 'grid-column-header');
- self.sortDirection = self.sortDirection == 'desc' ? 'asc' : 'desc';
- self.sortColumn = data.id;
- self._update({ columns: false });
- }
-
+ self._handleClick.call(self, e);
});
-
-
+
//Selection of rows
+ this._makeRowsSelectable();
+
+
+
+ },
+
+ _handleClick: function(e) {
+
+ //Click on column header toggles sorting
+ if($(e.target.parentNode).is('.ui-grid-column-header')) {
+ var data = $.data(e.target.parentNode, 'grid-column-header');
+ this.sortDirection = this.sortDirection == 'desc' ? 'asc' : 'desc';
+ this.sortColumn = data.id;
+ this._update({ columns: false });
+ }
+
+ },
+
+ _makeRowsSelectable: function() {
this.content.parent().parent().selectable({
filter: 'tr',
multiple: this.options.multipleSelection,
selectClass: 'ui-grid-row-selected',
focusClass: 'ui-grid-row-focussed'
});
-
},
_update: function(o) {
@@ -110,7 +110,8 @@
self._updateColumnHeaderSize();
- $('div.ui-grid-limits', self.footer).html('Result ' + options.start
+ '-' + (options.start + options.limit) + ' of ' + response.totalRecords);
+ $('div.ui-grid-limits', self.footer)
+ .html('Result ' + options.start + '-' + (options.start +
options.limit) + ' of ' + response.totalRecords);
});
@@ -119,12 +120,9 @@
_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
-
};
},
@@ -135,8 +133,8 @@
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(this.columnsContainer);
+ .data('grid-column-header', item[i])
+ .appendTo(this.columnsContainer);
};
},
@@ -161,7 +159,7 @@
$.extend($.ui.grid, {
defaults: {
- width: 400,
+ width: 500,
height: 300,
limit: false,