3 * https://github.com/ExactTarget/fuelux
5 * Copyright (c) 2012 ExactTarget
6 * Licensed under the MIT license.
9 define(['require','jquery'],function(require) {
11 var $ = require('jquery');
13 // Relates to thead .sorted styles in datagrid.less
14 var SORTED_HEADER_OFFSET = 22;
17 // DATAGRID CONSTRUCTOR AND PROTOTYPE
19 var Datagrid = function (element, options) {
20 this.$element = $(element);
21 this.$thead = this.$element.find('thead');
22 this.$tfoot = this.$element.find('tfoot');
23 this.$footer = this.$element.find('tfoot th');
24 this.$footerchildren = this.$footer.children().show().css('visibility', 'hidden');
25 this.$topheader = this.$element.find('thead th');
26 this.$searchcontrol = this.$element.find('.datagrid-search');
27 this.$filtercontrol = this.$element.find('.filter');
28 this.$pagesize = this.$element.find('.grid-pagesize');
29 this.$pageinput = this.$element.find('.grid-pager input');
30 this.$pagedropdown = this.$element.find('.grid-pager .dropdown-menu');
31 this.$prevpagebtn = this.$element.find('.grid-prevpage');
32 this.$nextpagebtn = this.$element.find('.grid-nextpage');
33 this.$pageslabel = this.$element.find('.grid-pages');
34 this.$countlabel = this.$element.find('.grid-count');
35 this.$startlabel = this.$element.find('.grid-start');
36 this.$endlabel = this.$element.find('.grid-end');
38 this.$tbody = $('<tbody>').insertAfter(this.$thead);
39 this.$colheader = $('<tr>').appendTo(this.$thead);
41 this.options = $.extend(true, {}, $.fn.datagrid.defaults, options);
43 // Shim until v3 -- account for FuelUX select or native select for page size:
44 if (this.$pagesize.hasClass('select')) {
45 this.options.dataOptions.pageSize = parseInt(this.$pagesize.select('selectedItem').value, 10);
47 this.options.dataOptions.pageSize = parseInt(this.$pagesize.val(), 10);
50 // Shim until v3 -- account for older search class:
51 if (this.$searchcontrol.length <= 0) {
52 this.$searchcontrol = this.$element.find('.search');
55 this.columns = this.options.dataSource.columns();
57 this.$nextpagebtn.on('click', $.proxy(this.next, this));
58 this.$prevpagebtn.on('click', $.proxy(this.previous, this));
59 this.$searchcontrol.on('searched cleared', $.proxy(this.searchChanged, this));
60 this.$filtercontrol.on('changed', $.proxy(this.filterChanged, this));
61 this.$colheader.on('click', 'th', $.proxy(this.headerClicked, this));
63 if(this.$pagesize.hasClass('select')) {
64 this.$pagesize.on('changed', $.proxy(this.pagesizeChanged, this));
66 this.$pagesize.on('change', $.proxy(this.pagesizeChanged, this));
69 this.$pageinput.on('change', $.proxy(this.pageChanged, this));
73 if (this.options.stretchHeight) this.initStretchHeight();
78 Datagrid.prototype = {
80 constructor: Datagrid,
82 renderColumns: function () {
85 this.$footer.attr('colspan', this.columns.length);
86 this.$topheader.attr('colspan', this.columns.length);
90 $.each(this.columns, function (index, column) {
91 colHTML += '<th data-property="' + column.property + '"';
92 if (column.sortable) colHTML += ' class="sortable"';
93 colHTML += '>' + column.label + '</th>';
96 self.$colheader.append(colHTML);
99 updateColumns: function ($target, direction) {
100 this._updateColumns(this.$colheader, $target, direction);
102 if (this.$sizingHeader) {
103 this._updateColumns(this.$sizingHeader, this.$sizingHeader.find('th').eq($target.index()), direction);
107 _updateColumns: function ($header, $target, direction) {
108 var className = (direction === 'asc') ? 'icon-chevron-up' : 'icon-chevron-down';
109 $header.find('i.datagrid-sort').remove();
110 $header.find('th').removeClass('sorted');
111 $('<i>').addClass(className + ' datagrid-sort').appendTo($target);
112 $target.addClass('sorted');
115 updatePageDropdown: function (data) {
118 for (var i = 1; i <= data.pages; i++) {
119 pageHTML += '<li><a>' + i + '</a></li>';
122 this.$pagedropdown.html(pageHTML);
125 updatePageButtons: function (data) {
126 if (data.page === 1) {
127 this.$prevpagebtn.attr('disabled', 'disabled');
129 this.$prevpagebtn.removeAttr('disabled');
132 if (data.page === data.pages) {
133 this.$nextpagebtn.attr('disabled', 'disabled');
135 this.$nextpagebtn.removeAttr('disabled');
139 renderData: function () {
142 this.$tbody.html(this.placeholderRowHTML(this.options.loadingHTML));
144 this.options.dataSource.data(this.options.dataOptions, function (data) {
145 var itemdesc = (data.count === 1) ? self.options.itemText : self.options.itemsText;
148 self.$footerchildren.css('visibility', function () {
149 return (data.count > 0) ? 'visible' : 'hidden';
152 self.$pageinput.val(data.page);
153 self.$pageslabel.text(data.pages);
154 self.$countlabel.text(data.count + ' ' + itemdesc);
155 self.$startlabel.text(data.start);
156 self.$endlabel.text(data.end);
158 self.updatePageDropdown(data);
159 self.updatePageButtons(data);
161 $.each(data.data, function (index, row) {
163 $.each(self.columns, function (index, column) {
164 rowHTML += '<td>' + row[column.property] + '</td>';
169 if (!rowHTML) rowHTML = self.placeholderRowHTML('0 ' + self.options.itemsText);
171 self.$tbody.html(rowHTML);
172 self.stretchHeight();
174 self.$element.trigger('loaded');
179 placeholderRowHTML: function (content) {
180 return '<tr><td style="text-align:center;padding:20px;border-bottom:none;" colspan="' +
181 this.columns.length + '">' + content + '</td></tr>';
184 headerClicked: function (e) {
185 var $target = $(e.target);
186 if (!$target.hasClass('sortable')) return;
188 var direction = this.options.dataOptions.sortDirection;
189 var sort = this.options.dataOptions.sortProperty;
190 var property = $target.data('property');
192 if (sort === property) {
193 this.options.dataOptions.sortDirection = (direction === 'asc') ? 'desc' : 'asc';
195 this.options.dataOptions.sortDirection = 'asc';
196 this.options.dataOptions.sortProperty = property;
199 this.options.dataOptions.pageIndex = 0;
200 this.updateColumns($target, this.options.dataOptions.sortDirection);
204 pagesizeChanged: function (e, pageSize) {
206 this.options.dataOptions.pageSize = parseInt(pageSize.value, 10);
208 this.options.dataOptions.pageSize = parseInt($(e.target).val(), 10);
211 this.options.dataOptions.pageIndex = 0;
215 pageChanged: function (e) {
216 var pageRequested = parseInt($(e.target).val(), 10);
217 pageRequested = (isNaN(pageRequested)) ? 1 : pageRequested;
218 var maxPages = this.$pageslabel.text();
220 this.options.dataOptions.pageIndex =
221 (pageRequested > maxPages) ? maxPages - 1 : pageRequested - 1;
226 searchChanged: function (e, search) {
227 this.options.dataOptions.search = search;
228 this.options.dataOptions.pageIndex = 0;
232 filterChanged: function (e, filter) {
233 this.options.dataOptions.filter = filter;
234 this.options.dataOptions.pageIndex = 0;
238 previous: function () {
239 this.$nextpagebtn.attr('disabled', 'disabled');
240 this.$prevpagebtn.attr('disabled', 'disabled');
241 this.options.dataOptions.pageIndex--;
246 this.$nextpagebtn.attr('disabled', 'disabled');
247 this.$prevpagebtn.attr('disabled', 'disabled');
248 this.options.dataOptions.pageIndex++;
252 reload: function () {
253 this.options.dataOptions.pageIndex = 0;
257 initStretchHeight: function () {
258 this.$gridContainer = this.$element.parent();
260 this.$element.wrap('<div class="datagrid-stretch-wrapper">');
261 this.$stretchWrapper = this.$element.parent();
263 this.$headerTable = $('<table>').attr('class', this.$element.attr('class'));
264 this.$footerTable = this.$headerTable.clone();
266 this.$headerTable.prependTo(this.$gridContainer).addClass('datagrid-stretch-header');
267 this.$thead.detach().appendTo(this.$headerTable);
269 this.$sizingHeader = this.$thead.clone();
270 this.$sizingHeader.find('tr:first').remove();
272 this.$footerTable.appendTo(this.$gridContainer).addClass('datagrid-stretch-footer');
273 this.$tfoot.detach().appendTo(this.$footerTable);
276 stretchHeight: function () {
277 if (!this.$gridContainer) return;
279 this.setColumnWidths();
281 var targetHeight = this.$gridContainer.height();
282 var headerHeight = this.$headerTable.outerHeight();
283 var footerHeight = this.$footerTable.outerHeight();
284 var overhead = headerHeight + footerHeight;
286 this.$stretchWrapper.height(targetHeight - overhead);
289 setColumnWidths: function () {
290 if (!this.$sizingHeader) return;
292 this.$element.prepend(this.$sizingHeader);
294 var $sizingCells = this.$sizingHeader.find('th');
295 var columnCount = $sizingCells.length;
297 function matchSizingCellWidth(i, el) {
298 if (i === columnCount - 1) return;
301 var $sourceCell = $sizingCells.eq(i);
302 var width = $sourceCell.width();
304 // TD needs extra width to match sorted column header
305 if ($sourceCell.hasClass('sorted') && $el.prop('tagName') === 'TD') width = width + SORTED_HEADER_OFFSET;
310 this.$colheader.find('th').each(matchSizingCellWidth);
311 this.$tbody.find('tr:first > td').each(matchSizingCellWidth);
313 this.$sizingHeader.detach();
318 // DATAGRID PLUGIN DEFINITION
320 $.fn.datagrid = function (option) {
321 return this.each(function () {
323 var data = $this.data('datagrid');
324 var options = typeof option === 'object' && option;
326 if (!data) $this.data('datagrid', (data = new Datagrid(this, options)));
327 if (typeof option === 'string') data[option]();
331 $.fn.datagrid.defaults = {
332 dataOptions: { pageIndex: 0, pageSize: 10 },
333 loadingHTML: '<div class="progress progress-striped active" style="width:50%;margin:auto;"><div class="bar" style="width:100%;"></div></div>',
338 $.fn.datagrid.Constructor = Datagrid;