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:
Carregando comentários...