Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 (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';
};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
quem quiser conhecer melhor extjs:
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:
Acabei e ja editei o primeiro topico agora esta completo com todos exemplos que eu queria passar
t+
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/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
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
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
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?
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
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
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
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();$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();$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:
dai quem nao usa PHP5 só usar o JSON em script php.
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!
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
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/
o meu nao está funcionando, o meu é php4, só funciona no 5 é isso?
nao no seu caso é por causa do JSON, qual exemplo você ta tentando usar?
nenhum deles tá funcionando, inseri dados pelo phpmyadmin, mas nao aparecem em nenhum gridgostaria de utilizar o n.º 5
o problema é na parte do PHP, você tem que ver te ta tudo ok, nome do usuario, senha banco de dados etc...
isso aí ta beleza, configurei td e o banco tb tá criado, etc etcserá q o prob. é só o json ou seria outro?
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
Tenta na pagina lista_usuarios na ultima linha substituir echo $_GET['callback'].'({"resultado":'.json_encode($arr).'})';por echo $_GET['callback'].'({"resultado":'.$json->encode($arr).'})'; o primeiro exemplo esta certo para quem usa o PHP a partir da verçao 5.2.0 pois eu usava php4 e resolvi metendo $json->encode em vez de json_encode
isso mesmo o json_encode é uma função do php5, ja o script JSON é pra quem usa php4
fiz a alteração, mas nao funcionou ainda, vou tentar o firebug pra vereu clico em novo usuário ele manda faz tudo normal, como se funcionasse, mas quando vou ver no banco está vazio
Show de bola fabão pela iniciativa.. essa biblioteca sem duvidas e uma das melhores q já trabalhei...
Allô Fabyo,fiz download ao datagrid1. Alterei para a minha base de dados. No ficheiro 'listar_usuarios.php' o array está preenchido com todos os dados da minha base de dados.Alterei o main.js para os meus campos e até aqui tudo bem.O problema é que o datagrid não mostra os dados. Nâo é carregado.
você acessa o listar_usuarios.php e mostra os dados?
você alterou certo no main.js?
putz.. naum conhecia essa ferramenta, muito massa ela... ateh que enfim vou poder fazer uns datagrids legais hehehe :D :D :D
Gostei disso, simples e direto hehehe