[Resolvido] Grid

[hunternh 2]

Em funcionamento: http://hunternh.110mb.com/exemplos/grid.html

 

Utiliza a biblioteca jQuery: http://hunternh.110mb.com/exemplos/jquery-latest.pack.js

Utiliza a biblioteca jquery-dom: http://hunternh.110mb.com/exemplos/jquery-dom.js

 

/**************************************** Grid v1.0						  ** Autor: Wagner B. Soares			****************************************/Grid = function(id){	// variável que receberá as funções privadas	var privado = new Object();	// recebe a div que será o container da tabela 	var parent = document.getElementById(id); 	if(typeof parent == 'undefined' || parent == null) return; 	// tabela principal que recebe o cabeçalho 	var tabHeader = jQuery.create("table", {}, ["thead", {}, [],"tbody", {"class":"tb"}, []]); 	// corpo que receberá as linhas da tabela	var tBody = jQuery.create("tbody", {"id":"tbody-"+id}, []);	// container utilizado se houver scroll	var sC = jQuery.create("div", {"class":"tabScroll"}, []);	// indica se haverá ou não scroll	var scroll = false;	// recebe as informações do cabeçalho	var cabecalho = new Array();	// recebe as informações da linhas da tabela	var corpo = new Array();	// recebe os tamanhos das colunas	var sizeCols = new Array;	// recebe o tamanho da tabela	var width = null;	// recebe o referência do próprio objeto Grid	var obj = this;		// esconde o corpo da tabela principal	jQuery(".tb",tabHeader).each(function(){this.style.display = "none";});		// configura o rótulo da tabela	this.setCaption = function(x)	{		jQuery(tabHeader).prepend(jQuery.create("caption",{},[x]));	};		// configura os valores do cabeçalho	this.setHeaderValues = function(x)	{		cabecalho = (typeof x != 'undefined' && x != null) ? x : new Array();		var lineHead = document.createElement("tr");				for(var i in cabecalho)		{			celHead = jQuery.create("th", {"class":"tabela-coluna-"+i}, ["span", {}, []]);			jQuery("span",celHead).html(cabecalho[i]);			jQuery(lineHead).append(celHead);		}				jQuery("thead",tabHeader).append(lineHead);		jQuery("th",tabHeader).each(function(){jQuery(this).css({borderTop:"1px solid #000000",borderBottom:"1px solid #000000",borderRight:"1px solid #000000",padding:"0px"});});		jQuery("th.tabela-coluna-0",tabHeader).each(function(){jQuery(this).css({borderLeft:"1px solid #000000"});});	};		// configura os valores das linhas da tabela	this.setRowsValues = function(x)	{		corpo = (typeof x != 'undefined' && x != null) ? x : new Array();				for(var i in corpo)		{			var lineBody = jQuery.create("tr", {"class":"tabela-linha-"+i}, []);			for(var j in corpo[i])			{				var celBody = jQuery.create("td", {"class":"tabela-coluna-"+j}, ["span", {}, []]);				jQuery("span",celBody).html(corpo[i][j]);				jQuery(lineBody).append(celBody);			}			jQuery(tBody).append(lineBody);		}		jQuery("td",tBody).each(function(){jQuery(this).css({borderBottom:"1px solid #000000",borderRight:"1px solid #000000",padding:"0px"});});	};		//configura os tamanhos das colunas	this.setSizeCols = function(x)	{		sizeCols = (typeof x != 'undefined' && x != null) ? x : new Array();	};		// configura os tamanhos e atributos da tabela	privado.setup = function()	{		var s = 0;		var b = -1;		width = 0;		for(var i in sizeCols)		{			width += sizeCols[i];			jQuery("th.tabela-coluna-"+i,tabHeader).each(function(){jQuery(this).css({width:String(sizeCols[i]+b)+"px",borderCollapse:"collapse"});});			jQuery("td.tabela-coluna-"+i,tBody).each(function(){jQuery(this).css({width:String(sizeCols[i]+b)+"px",borderCollapse:"collapse"});});			jQuery("td.tabela-coluna-0",tBody).each(function(){jQuery(this).css({borderLeft:"1px solid #000000"});});		}				if(scroll) s = 18;		jQuery(parent).css({width:String(width+s)+"px",border:"0px"});		jQuery(sC).css({width:String(width+s)+"px",overflow:"auto"});		};		// configura o tamanho do scroll do corpo da tabela	this.setHeightScroll = function(h)	{		scroll = true;		jQuery(sC).css({height:String(h)+"px"});	};		// adiciona uma nova linha na tabela	this.addLine = function(x)	{		var line = (typeof x != 'undefined' && x != null) ? x : new Array();		corpo[corpo.length] = line;				var lineBody = jQuery.create("tr", {"class":"tabela-linha-"+i}, []);		for(var i in line)		{			var celBody = jQuery.create("td", {"class":"tabela-coluna-"+i}, ["span", {}, []]);			jQuery("span",celBody).html(line[i]);			jQuery(lineBody).append(celBody);		}		jQuery(tBody).append(lineBody);		jQuery("td",tBody).each(function(){jQuery(this).css({borderBottom:"1px solid #000000",borderRight:"1px solid #000000",padding:"0px"});});		jQuery("span",parent).each(function(){jQuery(this).css({padding:"3px",display:"block"});});	};		this.getHeaderValue = function(){return cabecalho;};	this.getRowsValue = function(){return corpo;};		// insere a tabela na tela e termina de configurá-la	this.draw = function()	{		privado.setup();		jQuery(parent).append(tabHeader);		if(scroll) jQuery(parent).append(jQuery(sC).append(jQuery.create("table",{},[tBody])));		else jQuery(tabHeader).append(tBody);		jQuery("table",parent).each(function(){jQuery(this).css({width:String(width)+"px",borderCollapse:"collapse",borderLeft:"1px solid #000000",marginLeft:"1px"});});		jQuery("span",parent).each(function(){jQuery(this).css({padding:"3px",display:"block"});});	};};