jqGrid + Zend Framework

Hoje vou falar sobre um plugin jQuery chamado jqGrid e como fazer sua intereção com o Zend Framework.

jqGrid

jqGrid é um plugin jQuery que faz muito mais que um simples grid
Ele traz algumas vantagens como:

• Paginação
• Busca
• Formulário próprio para CRUD

Entre outras.. E todas essas opções podem ser configuradas, formando uma gama enorme de possibilidades.

Não quero falar muito do plugin em si, mas sim como interegir com o MVC do Zend Framework.

Cenário

Para ilustrar um cenário onde o plugin pode ser usado, vamos desenvolver uma pequena agenda de contatos.

A agenda tem apenas as informações: Nome, telefone e endereço.

Vamos ao código:

Banco de Dados

CREATE TABLE `agenda` (
	`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
	`nome` VARCHAR( 100 ) NOT NULL ,
	`fone` DOUBLE NOT NULL ,
	`endereco` VARCHAR( 255 ) NOT NULL
)

model/Agenda.php

<?php

class Agenda extends Zend_Db_Table_Abstract{

    protected $_name = 'agenda';

}

AgendaController.php

class AgendaController extends Zend_Controller_Action {

	// Action para exibir o grid
	public function indexAction() {
		// Nada
    }

	// Action para fornecer os dados do grid
    public function dadosAction() {
        $this->_helper->layout->disableLayout();
        $page   = $this->_request->getParam("page",1);
        $limit  = $this->_request->getParam("rows");
        $sidx   = $this->_request->getParam("sidx",1);
        $sord   = $this->_request->getParam("sord");

        $tabela = new Agenda();
        $agenda = $tabela->fetchAll();

        $count = count( $agenda );

        if( $count >0 ) {
            $total_pages = ceil($count/$limit);
        } else {
            $total_pages = 0;
        }

        if ($page > $total_pages)
            $page = $total_pages;

        $agenda = $tabela->fetchAll(null, "$sidx $sord", $limit, ($page*$limit-$limit));

        $responce->page = $page;
        $responce->total = $total_pages;
        $responce->records = $count;
        $i=0;

        foreach($agenda as $row) {
            $responce->rows[$i]['id']=$row->id;
            $responce->rows[$i]['cell']=array(
                    $row->id,
                    $row->nome,
                    $row->fone,
                    $row->endereco
            );
            $i++;
        }

        $this->view->dados = $responce;
    }

	// Action para adicionar, editar ou deletar os registros da agenda
    public function saveAction() {
        $this->_helper->layout->disableLayout();
        $this->_helper->viewRenderer->setNoRender(true);

        $tabela = new Agenda();
        $oper = $this->_request->getPost("oper");

        if($oper == "edit" || $oper == "del") {
            $id     = $this->_request->getPost("id");
            $agenda = $tabela->find($id)->current();
        } else {
            $agenda = $tabela->fetchNew();
        }

        if($oper == "add" || $oper == "edit") {
            $agenda->nome      = $this->_request->getPost("nome");
            $agenda->fone      = $this->_request->getPost("fone"));
            $agenda->endereco  = $this->_request->getPost("endereco");
            $agenda->save();

        } elseif($oper == "del") {
            $agenda->delete();
        }
    }
}

views/scripts/agenda/index.phtml

<table id="tbl-agenda"></table>
<div id="pg-agenda"></div>

<script type="text/javascript">

    $("#tbl-agenda").jqGrid({
        url:'/exemplos/jqGrid/agenda/dados',
        editurl:'/exemplos/jqGrid/agenda/save',
        datatype: "json",
        mtype: 'GET',
        colNames:['C&oacute;d', 'Nome', 'Fone', 'Endere&ccedil;o'],
        colModel:[
            {name:'id',index:'id', width:55, sorttype:"int", align:"center"},
            {name:'nome',index:'nome', width: 200, editable: true},
            {name:'fone',index:'fone', width: 100, align:"center", editable: true},
            {name:'endereco',index:'endereco', width: 400, editable: true}
        ],
        rowNum:10,
        rowList:[10,20,30],
        pager: '#pg-agenda',
        sortname: 'nome',
        viewrecords: true,
        sortorder: "ASC",
        caption:"Agenda"
    });

    $("#tbl-agenda").jqGrid('navGrid','#pg-agenda',{edit:true,add:true,del:true,search:true});
</script>

views/scripts/agenda/dados.phtml

<?=$this->json($this->dados);?>

Apesar do código extenso, não é nada complicado.
Espero que gostem. Até mais..

Você também pode gostar de:

1. Paginação de Resultados PHP+MySQL