Jump to content
Fabyo

DataGrid completo

Recommended Posts

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:

datagrid1.zip

datagrid2.zip

datagrid3.zip

datagrid4.zip

datagrid5.zip

datagrid6.zip

 

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

Edited by Mário Monteiro
  • +1 2

Share this post


Link to post
Share on other sites

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 Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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

 

t+

Share this post


Link to post
Share on other sites

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

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Edited by Mário Monteiro

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.