DataGrid completo

Fabyo · Agosto 9, 2007

Pessoal vou postar uns exemplos de datagrid usando a fantastica ferramenta EXTjs, para quem nao conhece vai gostar com certeza e quem ja conhece vai aprender passo a passo como montar um datagrid sem misterios.

esse assunto tem mais haver com javascript, mas resolvi postar aqui mesmo porque envolve PHP para listagem dos dados do banco de dados e quem vai usar mesmo essa dica serão os programadores.

um exemplo do meu datagrid funcionando pra terem uma ideia de como ele vai ficar:

http://extjs.com/deploy/ext-1.1/examples/grid/edit-grid.html

reparem que ele tem:

* ordernar em cada coluna

* se segurar a coluna você pode arrastar e trocar ela de lugar

* 2 cliques edita rapido

estou postando 6 exemplos:

* datagri1 = datagrid simples

* datagri2 = datagrid com edição rapida

* datagri3 = datagrid com edição rapida e paginação

* datagri4 = datagrid com edição rapida e exclui, edita e salva as alterações do datagrid

* datagri5 = datagrid com edição rapida e exclui, edita e salva as alterações do datagrid e paginação

* datagri6 = datagrid com edição rapida e exclui, edita e salva as alterações do datagrid e paginação e pesquisa rapida

agora vamos ao datagrid

banco:

DROP DATABASE IF EXISTS sistema;
CREATE DATABASE sistema;
USE sistema;

DROP TABLE IF EXISTS usuarios;
CREATE TABLE usuarios (
id_usuario SMALLINT ( 5 ) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
nome VARCHAR ( 40 ) NOT NULL,
email VARCHAR ( 64 ) NOT NULL UNIQUE,
data_cadastro DATE NOT NULL DEFAULT '0000-00-00',
news ENUM ( '0', '1' ) NOT NULL DEFAULT '0'	
) TYPE = innodb;

ate aqui é muito simples, se voce nao sabe instalar um banco de dados entao nem continue a leitura e va estudar mais.

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>Datagrid Edição rapida</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="language" content="pt-br" />
<meta name="resource-type" content="document" />
<meta name="classification" content="Internet" />
<meta name="distribution" content="Global" />
<meta name="rating" content="General" />
<meta name="robots" content="All" />	
<meta name="author" content="Fabyo" />
<meta name="subject" content="fabyo.php@gmail.com" />	
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-plugins.js"></script>
<script type="text/javascript" src="js/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/ext-lang-pt_br.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="grid"></div>	
</body>
</html>

como viram nao tem segredo basta colocar um div e pronto.

e acrescentar os js e css necessarios, só explicando um pouco o extjs foi criado para funcionar com jquery, prototype ou yui

e para isso só usar os adaptadores, no meu caso to usando o jquery.

main.js principal que vamos usar:

//essa primeira linha é do jquery é o metodo de inicio do script depois que acabou de carregar toda pagina
$(function(){
//função para formatação dos campos
function formatDate(value){
	return value ? value.dateFormat('d M, Y') : '';
};

function formatBoolean(value){
	return value == 1 ? 'Sim' : 'Não';  
};
//aqui crio as colunas do grid 
//mais detalhes http://extjs.com/deploy/ext-1.1/docs/output/Ext.grid.ColumnModel.html
//http://extjs.com/deploy/ext-1.1/docs/output/Ext.form.TextField.html
//http://extjs.com/deploy/ext-1.1/docs/output/Ext.grid.EditorGrid.html

var cm = new Ext.grid.ColumnModel(
	[
		{
			header: "Nome",
			dataIndex: 'nome',
			width: 220,
			sortable: true,
			editor: new Ext.grid.GridEditor(new Ext.form.TextField(
				{
					allowBlank: false						
				}
			))
		},			

		{
			header: "Email",
			dataIndex: 'email',
			width: 220,
			sortable: true,
			editor: new Ext.grid.GridEditor(new Ext.form.TextField(
				{
					allowBlank: false,
					vtype:'email'
				}
			))
		},		

		{
			header: "Data Cadastro",
			dataIndex: 'data_cadastro',
			width: 220,
			sortable: true,
			renderer: formatDate,
			editor: new Ext.grid.GridEditor(new Ext.form.DateField(
				{
					format: 'd/m/Y'
				}
			))
		},

		{
			header: "Receber Noticias",
			dataIndex: 'news',
			width: 220,
			renderer: formatBoolean,
			editor: new Ext.grid.GridEditor(new Ext.form.Checkbox())				
		}				
	]
);
cm.defaultSortable = true;	

ds = new Ext.data.Store({
	proxy:  new Ext.data.ScriptTagProxy({
		url:'listar_usuarios.php'
	}),
	reader:  new Ext.data.JsonReader({
		root: 'resultado', 
		id: 'id_usuario'
	},
		[
			{name: 'nome', mapping: 'nome', type: 'string'},
			{name: 'email', mapping: 'email', type: 'string'}, 
			{name: 'data_cadastro', mapping: 'data_cadastro', type:'date', dateFormat:'Y-m-d'},
			{name: 'news', mapping: 'news', type:'boolean'}
		]
	)
});

var grid = new Ext.grid.EditorGrid('grid', {
	ds: ds,
	cm: cm,
	enableColLock:false		
});	
grid.render();
ds.load();		
});

qualquer duvida sobre o datagrid só perguntar

to colocando os exemplos prontos em anexo para download:

Datagrid extjs 2.x nova versao

datagrid1_ext2.zip

quem quiser conhecer melhor extjs:

http://extjs.com/

http://extjs.com/deploy/ext-1.1/docs/

http://extjs.com.br/forum/viewtopic.php?t=22

Eu que mantenho administro a comunidade extjs no brasil:

http://extjs.com.br/

http://extjs.com.br/forum

http://extjs.com.br/blog

datagrid6.zip

wolfphw · Agosto 9, 2007

putz.. naum conhecia essa ferramenta, muito massa ela... ateh que enfim vou poder fazer uns datagrids legais hehehe :D :D :D

se voce nao sabe instalar um banco de dados entao nem continue a leitura e va estudar mais.

Gostei disso, simples e direto hehehe

Fabyo · Agosto 9, 2007

Acabei e ja editei o primeiro topico agora esta completo com todos exemplos que eu queria passar

t+

David Ramires · Agosto 9, 2007

Boa Fabyo, muito boa essa lib de js,

tenho aqui alguns links com exemplos:

http://ido.nl.eu.org/extdocsearch

http://ido.nl.eu.org/pir/

http://ido.nl.eu.org/static/ext-1.0-alpha3...earch-grid.html

http://aariadne.com/accordion-preview/

ah, para quem não sabe podemos usar Extjs com JQuery, entre outras lib´s.

ainda vamos ouvir falar muito sobre extjs por ai!

Parabéns pela Iniciativa,

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

LaBoss · Agosto 13, 2007

boas ppl, nao ha maneira de tirar a parte do editar e do eliminar da grid?

eu so queria ordenar as cosias,

E ja agpra para que serve isto

-------------

acho k o scrip esta com um erro, eu editei aqui:

arquivo listar_usuarios.php

estava

<?phpmysql_connect("localhost", "root", ""); mysql_select_db("sistema");$rs	= mysql_query("SELECT * FROM usuarios");$arr = array();while($obj = mysql_fetch_object($rs)){	$arr[] = $obj;}echo $_GET['callback'].'({"resultado":'.json_encode($arr).'})'; ?>

e meti:

<?phpinclude_once("JSON/JSON.php");$json = new Services_JSON();mysql_connect("localhost", "root",""); mysql_select_db("ajax");$rs	= mysql_query("SELECT * FROM usuarios");$arr = array();while($obj = mysql_fetch_object($rs)){	$arr[] = $obj;}echo $_GET['callback'].'({"resultado":'.$json->encode($arr).'})'; ?>

corrigi a parte do json

ps:. saquei o datagrid4

Fabyo · Agosto 13, 2007

Entao baixe o datagrid 1 ele ta simples e nao tem editar nem salvar

no seu servidor tem phpmyadmin?

qualquer coisa tente montar a base via phpmyadmin do seu servidor

obs: nao ta com erro nao, o JSON só é usado quando você vai salvar o grid

e vai dar erro se seu banco de dados nao tiver montado

LaBoss · Agosto 13, 2007

boas Fabyo, ele pegasim o json para listar os usuarios,

esta a dar isto

({"resultado":[{"id_usuario":"1","nome":"TESTE","email":"TESTE","data_cadastro":"0000-00-00","news":"1"},{"id_usuario":"2","nome":"TESTE","email":"ETE","data_cadastro":"0000-00-00","news":"0"}]})

o meu banco esta a dar ja :D, era mesmo a criar a base dados... hehe estou a aprender a usar isto, mas tenho aki umas duvidas, tipo como posso pro imagens nos separadores??

e as combobox nao estou a perceber o funcionamento... me poderia ajudar?

Fabyo · Agosto 13, 2007

sim, mas como falei nao precisa do json nesse exemplo se quiser eu coloco no ar pra você ver

mas sobre o combo qual a duvida?

e sobre as imagens é atraves de css, veja os outros exemplos que tem imagens pra você ver como funciona

LaBoss · Agosto 13, 2007

queria por varias caixas de texto, tipo PC1 PC2 PC3, E Com a respectiva descrição....as imagens era tipo uma imagem com um link do genero ver.php?id=009percebe para k? xDnao é perciso que meta o sistema no ar... ja esta funcionando akija agora parabens por esta lib nao a conhecia e esta optima mesmo os meus parabens

Fabyo · Agosto 13, 2007

da pra colocar a imagem normal só digitar o html dela mesmo exemplo <img src="imagem.gif" />

dai aparecera no grid a imagem

obs: criei mais 2 exemplos se quiser baixar ta la na primeira pagina

* datagri1 = datagrid simples

* datagri2 = datagrid com edição rapida

* datagri3 = datagrid com edição rapida e paginação

* datagri4 = datagrid com edição rapida e exclui, edita e salva as alterações do datagrid

* datagri5 = datagrid com edição rapida e exclui, edita e salva as alterações do datagrid e paginação

* datagri6 = datagrid com edição rapida e exclui, edita e salva as alterações do datagrid e paginação e pesquisa rapida

Fabyo · Agosto 13, 2007

boas ppl, nao ha maneira de tirar a parte do editar e do eliminar da grid?

eu so queria ordenar as cosias,

E ja agpra para que serve isto

-------------

acho k o scrip esta com um erro, eu editei aqui:

arquivo listar_usuarios.php

estava
<?php
mysql_connect("localhost", "root", ""); 
mysql_select_db("sistema");

$rs	= mysql_query("SELECT * FROM usuarios");

$arr = array();
while($obj = mysql_fetch_object($rs))
{
$arr[] = $obj;
}

echo $_GET['callback'].'({"resultado":'.json_encode($arr).'})'; 
?>
e meti:
<?php
include_once("JSON/JSON.php");
$json = new Services_JSON();

mysql_connect("localhost", "root",""); 
mysql_select_db("ajax");



$rs	= mysql_query("SELECT * FROM usuarios");

$arr = array();
while($obj = mysql_fetch_object($rs))
{
$arr[] = $obj;
}

echo $_GET['callback'].'({"resultado":'.$json->encode($arr).'})'; 
?>
corrigi a parte do json

ps:. saquei o datagrid4

explicando essa parte no primeiro exemplo esta assim:

echo $_GET['callback'].'({"resultado":'.json_encode($arr).'})';

por isso que falei que nao precisava acrescentar o JSON que é o caso de outro exemplo

essa função json_encode faz parte do php5:

http://php.net/json_encode

dai quem nao usa PHP5 só usar o JSON em script php.

Danilo Augusto · Agosto 14, 2007

Como eu posso incluir link dentro dos dados do datagrid, para abrir por exemplo uma nova pagina!!Eu estou desenvolvendo um sistema e achei interessante a utlizacao de EXTjs ao menos em algumas partes do site.desde ja Obrigado!

Fabyo · Agosto 14, 2007

você pode fazer assim repare o datagrid1 onde:

			{
			header: "Nome",
			dataIndex: 'nome',
			width: 220,
			sortable: true

		},

adicione um renderer:

			{
			header: "Nome",
			dataIndex: 'nome',
			width: 220,
			sortable: true,
			renderer:  function(data) {
				return "<a href=\"teste.html\">"+data+"</a>";
			}
		},

percebeu como que faz?

qualquer duvida só postar

Fabyo · Agosto 15, 2007

Da pra transformar o datagrid em executavel para rodar em desktop sem precisar de navegador

http://extjs.com/blog/2007/06/29/building-...a-and-red-bull/

newmmax · Agosto 20, 2007

o meu nao está funcionando, o meu é php4, só funciona no 5 é isso?

Fabyo · Agosto 20, 2007

nao no seu caso é por causa do JSON, qual exemplo você ta tentando usar?

newmmax · Agosto 20, 2007

nenhum deles tá funcionando, inseri dados pelo phpmyadmin, mas nao aparecem em nenhum gridgostaria de utilizar o n.º 5

Fabyo · Agosto 20, 2007

o problema é na parte do PHP, você tem que ver te ta tudo ok, nome do usuario, senha banco de dados etc...

newmmax · Agosto 20, 2007

isso aí ta beleza, configurei td e o banco tb tá criado, etc etcserá q o prob. é só o json ou seria outro?

Fabyo · Agosto 20, 2007

você precisa debugar pra saber o que ta acontecendo, recomendo use o firefox e instale o firebug

assim você vai ver qual erro que esta dando

Arquivado

DataGrid completo

Recommended Posts

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

David Ramires 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

LaBoss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

LaBoss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

LaBoss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Danilo Augusto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

newmmax 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

newmmax 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

newmmax 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66