:::: MENU ::::

php + grid + jquery easy ui

Neste post vou mostrar como padronizar uma um grid utilizando: PHP e Jquery Easy UI.
Veja a página em ação aqui.
Baixe os arquivos.

Documento HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />                                
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- incluindo o css da biblioteca jquery easy ui -->
<link href="js/jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<!-- incluindo o css dos ícones da biblioteca easy ui -->
<link href="js/jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
<!-- incluindo o jquery -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
<!-- incluindo a biblioteca jquery easy ui -->
<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<!-- incluindo a customização do grid (onde toda a mágica acontece) -->
<script type="text/javascript" src="js/custom/grid.js"></script>

Estrutura do Json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{"rows":
	[
	   {
		"nome":"Amanda",
		"sobrenome":"Clark",
		"telefone":"(11) 1111-1111"
           },
	   {
		"nome":"Steve",
		"sobrenome":"Jobs",
		"telefone":"(11) 2222-2222"
	},
	{
		"nome":"Bill",
		"sobrenome":"Gates",
		"telefone":"(11) 3333-3333"
	},
	{
		"nome":"Albert",
		"sobrenome":"Einstein",
		"telefone":"(11) 4444-4444"
	}
   ],
   "total":4
}

Documento JS:
Aqui é onde toda brincadeira acontece.
Se você usar sempre a estrutura acima e incluir este arquivo, tudo irá funcionar sempre igual

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Grid = {
    init: function() {
        Grid.simple();
        Grid.search();
    },
	/**
	* cria um grid simples
	* lembrando que o grid é carregado via ajax 
	* de acordo com a url da página fornecida em search.php
	*/
    simple: function() {
        $('#dg').datagrid({
            url: 'search.php',
            toolbar: '#tb',
            autoRowHeight: true,
            fitColumns: true,
            iconCls: 'icon-save',
            pageSize: 10,
            pagination: true,
            remoteSort: true,
            rownumbers: true,
            striped: true,
            width: 1000,
            rowStyler: function(index, row) {
                if (index % 2 == 0) {
                    return 'background-color:#CCC;';
                }
            }
        });
        //alterando os labels da paginação
        var pager = $('#dg').datagrid('getPager');
        pager.pagination({
            beforePageText: 'Página',
            displayMsg: 'Exibindo {from} de {to} de {total} registros',
            showPageList: true
        });
    },
	/**
	* varre os inputs do toolbar
	* e inclui num objeto como: atributo1=valor1 atributo2=valor2
	*/
    search: function() {
        $('#bt-submit-search').click(function(e) {
            e.preventDefault();
            var obj = new Object();
            $('#tb input').each(function(index, element) {
                obj[$(element).attr('name')] = $(element).val();
            });
            $('#dg').datagrid('load', obj);
        })
    }
}
 
$('document').ready(function() {
    Grid.init();
})

Documento search.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!--?php  $aJson = array( 	'rows' =--> array(
		array(
			'nome' =&gt; 'Amanda',
			'sobrenome' =&gt; 'Clark',
			'telefone' =&gt; '(11) 1111-1111'
		),
		array(
			'nome' =&gt; 'Steve',
			'sobrenome' =&gt; 'Jobs',
			'telefone' =&gt; '(11) 2222-2222'		
		),
		array(
			'nome' =&gt; 'Bill',
			'sobrenome' =&gt; 'Gates',
			'telefone' =&gt; '(11) 3333-3333'		
		),
		array(
			'nome' =&gt; 'Albert',
			'sobrenome' =&gt; 'Einstein',
			'telefone' =&gt; '(11) 4444-4444'		
		),		
	),
);
//simulando uma busca
if(isset($_POST['search_nome']) &amp;&amp; !empty($_POST['search_nome'])) {
	foreach($aJson['rows'] as $k =&gt; $aData) {
		//echo $k. '
';
		if(in_array($_POST['search_nome'], $aData)) {
			$aJson = null;
			$aJson['rows'][] = $aData;
		}
	}
}
$aJson['total'] = count($aJson['rows']);
echo json_encode($aJson);
?&gt;

Documento css

1
2
3
4
5
6
body {
    background-color: #ccc;
    color:#222;
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:75%;
}

So, what do you think ?