Código Fonte - O melhor conteúdo para programadores

Este código tem nota

Autor

Formulário

Compartilhe e guarde

Enquete

Qual é o melhor portal da internet brasileira?

Home Código Fonte JavaScript - DHTML Formulários

Grid para dados ou formulários dinâmicos em JavaScript

É um compontente feito em javascript que funciona como um Grid Dinâmico / Grid de Dados, usado para exibir dados em forma de tabela.

A forma de usar é muito semelhante a grids utilizados em sistemas desktop. Muito útil para reutilização de código e pode ser usado para qualquer linguagem de programação, já que é feito em javascript. Fácil de usar e muito eficiente.

<link href="jsGrid.css" rel="stylesheet" type="text/css">
<script language="javascript" src="jsGrid.js"></script>

<script>
	var grid;
	function criaGrid(){
		grid = new jsGrid("divJGrid");
		grid.setTextMatrix(0,0,"0-0");
		grid.rows.add();
		grid.rows.add();
		grid.rows.add();

		grid.rows.addCol("100px");
		grid.rows.addCol("150px");		

		grid.setTextMatrix(0,0,"0-0");
		grid.setTextMatrix(0,1,"0-1");
		grid.setTextMatrix(0,2,"0-2");
		grid.setTextMatrix(1,0,"1-0");
		grid.setTextMatrix(1,1,"1-1");
		grid.setTextMatrix(1,2,"1-2");
		grid.setTextMatrix(2,0,"2-0");
		grid.setTextMatrix(2,1,"2-1");
		grid.setTextMatrix(2,2,"2-2");
		grid.setTextMatrix(2,2,"2-2");

	}
	function RemoveUltimaRow(){
		grid.rows.remove(grid.rows.count()-1);
	}
	function RemoveRowSelecionada(){
		grid.rows.selectedRow.remove();
	}
	function AdicionaLinha(){
		grid.rows.add();
	}
	function AdicionaColuna(){
		var largura = document.getElementById('txtLargura').value;
		grid.rows.addCol(largura);
	}
	function EditarTexto(){
		var row =  document.getElementById('txtLinha').value;
		var col  = document.getElementById('txtColuna').value;
		var valor  = document.getElementById('txtValor').value;
		grid.setTextMatrix(row,col,valor);
	}
	function ExibirValorCelula(){
		var row =  document.getElementById('txtLinha2').value;
		var col  = document.getElementById('txtColuna2').value;
		alert(grid.getTextMatrix(row,col));
	}	
	function MudarLarguraColuna(){
		var col =  document.getElementById('txtCol').value;
		var width =  document.getElementById('txtWidth').value;
		grid.rows.setColWidth(col,width);
	}
</script>

	<html>
		<body style="">
			<div id="divJGrid"></div>
			<input type="button" value="Deleta Ultima Linha" onClick="RemoveUltimaRow()"><br>
			<input type="button" value="Deleta Linha Selecionada" onClick="RemoveRowSelecionada()"><br>
			<input type="button" value="Adiconar Linha" onClick="AdicionaLinha()"><br>
			<input type="button" value="Adiconar Coluna" onClick="AdicionaColuna()">
				&nbsp;Largura: <input id='txtLargura' value='50px'><br>
			<input type="button" value="Editar Texto" onClick="EditarTexto()">
				&nbsp;Coluna: <input id='txtColuna' value='1'>
				&nbsp;Linha: <input id='txtLinha' value='1'>
				&nbsp;Valor: <input id='txtValor' value='Valor celula'><br>
			<input type="button" value="Exibir Valor Celula" onClick="ExibirValorCelula()">
				&nbsp;Coluna: <input id='txtColuna2' value='1'>
				&nbsp;Linha: <input id='txtLinha2' value='1'><br>
			<input type="button" value="Mudar Largura Coluna" onClick="MudarLarguraColuna()">
				&nbsp;Coluna: <input id='txtCol' value='1'>
				&nbsp;Linha: <input id='txtWidth' value='150px'><br>
		</body>
	</html>
<script>
	criaGrid();
</script>

grid.rows.addCol("100px");
		grid.rows.addCol("150px");

grid.setTextMatrix(0,0,"0-0");
		grid.setTextMatrix(0,1,"0-1");
		grid.setTextMatrix(0,2,"0-2");
		grid.setTextMatrix(1,0,"1-0");
		grid.setTextMatrix(1,1,"1-1");
		grid.setTextMatrix(1,2,"1-2");
		grid.setTextMatrix(2,0,"2-0");
		grid.setTextMatrix(2,1,"2-1");
		grid.setTextMatrix(2,2,"2-2");
		grid.setTextMatrix(2,2,"2-2");

}
	function RemoveUltimaRow(){
		grid.rows.remove(grid.rows.count()-1);
	}
	function RemoveRowSelecionada(){
		grid.rows.selectedRow.remove();
	}
	function AdicionaLinha(){
		grid.rows.add();
	}
	function AdicionaColuna(){
		var largura = document.getElementById('txtLargura').value;
		grid.rows.addCol(largura);
	}
	function EditarTexto(){
		var row =  document.getElementById('txtLinha').value;
		var col  = document.getElementById('txtColuna').value;
		var valor  = document.getElementById('txtValor').value;
		grid.setTextMatrix(row,col,valor);
	}
	function ExibirValorCelula(){
		var row =  document.getElementById('txtLinha2').value;
		var col  = document.getElementById('txtColuna2').value;
		alert(grid.getTextMatrix(row,col));
	}	
	function MudarLarguraColuna(){
		var col =  document.getElementById('txtCol').value;
		var width =  document.getElementById('txtWidth').value;
		grid.rows.setColWidth(col,width);
	}
</script>

<html>
		<body style="">
			<div id="divJGrid"></div>
			<input type="button" value="Deleta Ultima Linha" onClick="RemoveUltimaRow()"><br>
			<input type="button" value="Deleta Linha Selecionada" onClick="RemoveRowSelecionada()"><br>
			<input type="button" value="Adiconar Linha" onClick="AdicionaLinha()"><br>
			<input type="button" value="Adiconar Coluna" onClick="AdicionaColuna()">
				&nbsp;Largura: <input id='txtLargura' value='50px'><br>
			<input type="button" value="Editar Texto" onClick="EditarTexto()">
				&nbsp;Coluna: <input id='txtColuna' value='1'>
				&nbsp;Linha: <input id='txtLinha' value='1'>
				&nbsp;Valor: <input id='txtValor' value='Valor celula'><br>
			<input type="button" value="Exibir Valor Celula" onClick="ExibirValorCelula()">
				&nbsp;Coluna: <input id='txtColuna2' value='1'>
				&nbsp;Linha: <input id='txtLinha2' value='1'><br>
			<input type="button" value="Mudar Largura Coluna" onClick="MudarLarguraColuna()">
				&nbsp;Coluna: <input id='txtCol' value='1'>
				&nbsp;Linha: <input id='txtWidth' value='150px'><br>
		</body>
	</html>
<script>
	criaGrid();
</script>

Arquivo	Tipo	Tamanho	Hits
jsGrid.zip	Arquivo ZIP	3,5 Kb	341

Este código foi útil para você?

Nota	Comentário
10	denunciar germo comentou em 6/8/2009 ficou bom no meu html nossa ficou perfeito no meu eu gostei e avaliei
10	denunciar marklenio comentou em 28/5/2009 dúvida Como faço para que a coluna da esquerda seja númerada, e a cada nova linha, ela automaticamente incrementa. tipo: 1 2 3 . . . n Obrigado

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

Felipe Ferreira

Tags

DHTML

Formulário

Grid

Interface

Compartilhe e guarde

Enquete

Qual é o melhor portal da internet brasileira?

Grid para dados ou formulários dinâmicos em JavaScript

ficou bom no meu html

dúvida

Comente