gistfile1.js

(function($){
	$.widget('ui.datagrid',{
		options: {
			limit:5
			,offset:0
			,mapper:[]
			,height:200
			,jsonStore:{params:{},url:''}
			,pagination: true
			,toolBarButtons:false
			,refresh: false
			,onComplete: false
			,tBodyEventDelegate: {elem:'',fn:false}
			,rowNumber: false
			,ajaxMethod: 'POST'
			,autoRender: true
			,autoLoad: false
			,title: ''
		}
		,_create: function() {
			var self = this
			,uiDataGrid = (self.uiDataGrid = $(self._getMarkup()))
			,uiDataGridTables = (self.uiDataGridTables = uiDataGrid.children().find('table'))
			,uiDataGridThead = (self.uiDataGridThead = $(uiDataGridTables[0].tHead))
			,uiDataGridTbody = (self.uiDataGridTbody = $(uiDataGridTables[1].tBodies[0]))
			,uiDataGridTfoot = (self.uiDataGridTfoot = (self.options.pagination) ? $(uiDataGridTables[2].tBodies[0]) : $([]));
			
			// delegate event
			// click
			if ('' !== self.options.tBodyEventDelegate.elem && $.isFunction(self.options.tBodyEventDelegate.fn))
				uiDataGridTbody.delegate(self.options.tBodyEventDelegate.elem,'click',$.proxy(self.options.tBodyEventDelegate.fn))
		}
		,_init: function() {
			if (this.options.autoRender)
				this.render()
		}
		,_setOption: function(option,value) {
			$.Widget.prototype._setOption.apply(this,arguments);
		}
		,_getMarkup: function() {
			var _div = document.createElement('div'),markup = '';
			_div.className = 'ui-data-grid ui-widget ui-widget-content ui-corner-all';
			_div.style.cssText = 'padding:1px';
			
			if (this.options.title != '') {
				markup += '<div style="text-align: center; padding: 0.4em 0pt" class="ui-widget-header ui-corner-all">'
						+this.options.title
					+'</div>'
				+'<div class="ui-widget-content ui-corner-all" style="padding:1px;margin-top:1px">'	
			}
			
			markup += '<div>'
					+'<table cellspacing="0" cellpadding="0" class="ui-table" role="grid">'
						+'<thead>'
							+'<tr class="ui-table-header" role="rowheader">'
							+'</tr>'
						+'</thead>'
					+'</table>'
				+'</div>'
				+'<div style="height:'+this.options.height+'px;overflow-y:scroll;overflow-x:hidden">'
					+'<table cellspacing="0" cellpadding="0" class="ui-table ui-table-body" role="grid">'
						+'<tbody>'
						+'</tbody>'
					+'</table>'
				+'</div>';
			
			if (this.options.pagination) {
				markup += '<div class="ui-widget ui-state-default ui-corner-all">'
					+'<table cellspacing="0" cellpadding="0" style="width:100%">'
						+'<tbody>'
							+'<tr>'
								+'<td style="width:33%;padding:2px">&nbsp;'
								+'</td>'
								+'<td style="width:27%;text-align:center;padding:2px">'
									+'<button name="data-grid-button-prev" class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all" style="border-color:transparent">'
										+'<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-w"></span><span class="ui-button-text">Anterior</span>'
									+'</button>'
									+'<button name="data-grid-button-next" class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all" style="border-color:transparent">'
										+'<span class="ui-button-text" style="padding-left:1em">Próximo</span>'
										+'<span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e"></span>'
									+'</button>'
								+'</td>'
								+'<td style="text-align:right;width:33%;padding:2px">'
								+'</td>'
							+'</tr>'
						+'</tbody>'
					+'</table>'
				+'</div>'
			}
			
			if (this.options.title != '') {
				markup += '</div>'
			}
			
			markup += '</div>';
			
			_div.innerHTML = markup;
			markup = '';
			
			return _div
		}
		,_disableToolButtons: function() {
			$(this.uiDataGridTfoot[0].rows[0].cells).eq(-1)
				.prev()
				.children()
				.attr('disabled','disabled')
				.addClass('ui-state-disabled')
		}
		,_createColumns: function() {
			for(var row = [],_th,i=0;_th = this.options.mapper[i++];) {
				var aux = document.createElement('th');
				
				undefined !== _th.css && $(aux).css(_th.css);
				
				$(aux).attr('role','gridcell')[0].innerHTML = undefined !== _th.alias ? _th.alias : _th.name;
				row[row.length] = aux
			}
			aux = document.createElement('th');
			aux.innerHtml = '&nbsp';
			aux.style.width = '10px';
			row[row.length] = aux;
			
			if (this.options.rowNumber) {
				aux = document.createElement('th');
				aux.style.width = '20px';
				aux.innerHTML = '&nbsp';
				row.splice(0,0,aux)
			}
			
			for(i=0;_th = row[i++];) {
				this.uiDataGridThead[0].rows[0].appendChild(_th)
			}
		}
		,_ajax: function() {
			var self = this
			,row
			,cell
			,item
			,td
			,i=0
			,j=0;
			
			// disable button toolbar
			if (self.options.pagination)
				self._disableToolButtons();
			
			// jsonStore.params undefined
			if (undefined === self.options.jsonStore.params)
				self.options.jsonStore.params = '';
			
			// serialize
			// literal object (isPlainObject (json))
			if ('string' === typeof self.options.jsonStore.params) {
				self.options.jsonStore.params = (0 === self.options.offset)
					? self.options.jsonStore.params+'&limit='+self.options.limit+'&offset='+self.options.offset
					: self.options.jsonStore.params.replace(/(&offset=)(.+)/,'&offset='+self.options.offset)
			} else {
				self.options.jsonStore.params['limit'] = self.options.limit;
				self.options.jsonStore.params['offset'] = self.options.offset
			}
			
			// ajax
			$.ajax({
				type: self.options.ajaxMethod.toLowerCase()
				,url: self.options.jsonStore.url
				,data: self.options.jsonStore.params 
				,success: function(json) {
					try {
						json = toJSON(json);
					} catch (e) {
						alert(json.split('#').join("\n"));
						return
					}
					
					if (undefined != json.error) {
						alert(json.error);
						return;
					}
					
					var nPages = Math.ceil(json.numRows / self.options.limit)
					,currentPage = (self.options.offset == 0 ) ? 1 : ((self.options.offset / self.options.limit) + 1)
					,infoPages = (self.options.pagination)
						? 'Página '+currentPage+' de '+nPages+' - Total de registros: '+json.numRows
						: 'Total de registros: '+json.numRows;
					
					if (self.options.pagination) {
						// ultimo td
						$(self.uiDataGridTfoot[0].rows[0].cells).eq(-1).each(function(){
							$(this)
								.html('<span style="margin-right:5px">'+infoPages+'</span>')
								// penúltimo td
								.prev()
									.children()
									.each(function(){
										if (this.name == 'data-grid-button-prev') {
											if (self.options.offset > 0 && this.disabled)
												$(this).removeClass('ui-state-disabled')[0].disabled = false
										} else {
											if (nPages > currentPage && this.disabled)
												$(this).removeClass('ui-state-disabled')[0].disabled = false
										}								
									})
								.end()
							.end()
						})
					}
					
					self.uiDataGridTbody.empty();
					
					if (json.numRows == 0 )
						return false;			
					
					while (item = json.rows[i++]) {
						row = document.createElement('tr');
						row.className = ((i%2) ? 'odd' : 'even');
						row.style.cursor = 'default';

						if (self.options.rowNumber) {
							cell = document.createElement('td');
							cell.style.cssText = 'width:20px;text-align:center;';
							cell.innerHTML = parseInt(self.options.offset) + i;
							row.appendChild(cell)
						}
						
						while (_td = self.options.mapper[j++]) {
							cell = document.createElement('td');
							
							// default
							cell.style.textAlign = 'center';
							
							// apply the css conditions
							((undefined != _td.css) && $(cell).css(_td.css));
							
							// cell content
							cell.innerHTML = $.isFunction(_td.map)
								? _td.map(item[_td.name]) // aplica uma função no valor do campo
								: item[_td.name]; // mapper.row.fieldName
								
							row.appendChild(cell)
						}
						self.uiDataGridTbody[0].appendChild(row);
						
						// reset
						j = 0
					}
	
					row = cell = '';
					i = y = 0
				}
			})
		}
		,render: function() {
			var self = this;
			if (self.element.children().eq(0).hasClass('ui-data-grid')) {
				self.options.offset = 0;
				self.load()
			} else {
				self._createColumns();
				if (self.options.pagination) {
					if ($.isArray(self.options.toolBarButtons)) {
						$.each(self.options.toolBarButtons,function(){
							var b = this,cb = document.createElement('button'),$cb = $(cb)
							cb.innerHTML = b.label;
							
							if ($.isFunction(b.fn)) {
								$cb.click(function(e){
									b.fn.apply(this,[self.uiDataGrid[0],self.uiDataGridThead[0],self.uiDataGridTbody[0],self.uiDataGridTfoot[0]]);
									$cb.blur()
								})
							}
							
							$cb.button({icons:{primary:(undefined === b.icon) ? null : 'ui-icon-'+b.icon}});
							
							self.uiDataGridTfoot[0].rows[0].cells[0].appendChild(cb)
						})
					}
		
					$(self.uiDataGridTfoot[0].rows[0].cells).eq(-1).prev().children().each(function(k,v){
						$(this).click(function(){
							if (!(/(button-next|button-prev)$/.test(this.name)) || this.disabled)
								return;
							
							if (this.name === 'data-grid-button-next') {
								self.options.offset += self.options.limit
							} else {
								self.options.offset -= self.options.limit
							}
							
							$(this).blur();
							self.load()
						})
					})
				}
				
				if (this.options.autoLoad && this.options.jsonStore.params != '')
					self.load();
				
				// onComplete callback
				($.isFunction(self.options.onComplete) && self.options.onComplete.call(self.uiDataGridTbody[0]));
				
				this.element.html(this.uiDataGrid[0])
			}
		}
		,load: function() {
			this._ajax()
		}
		,widget: function() {
			return this.uiDataGrid
		}
		,destroy: function() {
			$.Widget.prototype.destroy.call(this);
			this.element.empty()
		}
	})
})(jQuery)