Sortable no CakePHP 2.+

Hoje em dia com a “tal” web 2.0 é comum depararmo-nos durante o desenvolvimento de um projeto com a necessidade da utilização de recursos AJAX de diversos tipos, e o que veremos neste post será a utilização do sortable (Jquery UI).

Ele permite com um simples arrastar do mouse modificar a ordem de linhas de uma lista qualquer, seja ela uma lista propriamente dita, linhas de uma tabela ou divs. Neste exemplo utilizarei uma tabela e estou levando em conta que você já tenha conhecimento básico sobre o CakePHP e sobre jQuery.

Requerimentos:

  •  CakePHP 2.+
  • jQuery
  • jQuery UI

Primeiro Passo:

Crie uma entidade em seu banco de dados chamada categories com a seguinte estrutura:

CREATE TABLE `categories` (

`id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,

`name` VARCHAR(60) DEFAULT NULL,

`sort_order` INT(10) UNSIGNED DEFAULT NULL,

PRIMARY KEY (`id`)

);

 

Segundo Passo:

Utilize o BAKE para criar o modelo, o controle e a visualização da entidade criada no passo um (categories). PS (Você pode usar sua forma preferida para criar essas classes).

Terceiro Passo:

Para usarmos o Helper JS é necessário inserirmos a seguinte linha antes da tag body em seu layout da seguinte forma:

<?php echo $this->Js->writeBuffer();?>
</body>
</html>

 Quarto passo:

Precisamos agora declarar no controlador em questão que usaremos o Helper JS

class CategoriesController extends AppController {

public $helpers = array('Js' => array('Jquery'));

 Quinto passo:

Crie duas novas ações no controlador criado (categories)

class CategoriesController extends AppController {

public $helpers = array('Js' => array('Jquery'));

public function sort() {
$this->set('categories', $this->Category->find('all',array(
'order' => 'sort_order ASC',
)
));
}

public function reorder() {

foreach ($this->data['Category'] as $key => $value) {
$this->Category->id = $value;
$this->Category->saveField("sort_order",$key + 1);
}
exit();
}

Sexto passo:

Crie uma visualização para a ação sort (sort.ctp)

<div class="demo">
<?php echo $this->Html->link(__('Salvar'), array('action' => 'index'), array('id'=>'salvar')); ?>
<table class="table table-bordered table-striped">
        <tbody id="sortable">
    <?php
    foreach ($categories as $category):
    ?>
    <tr id="Category_<?php echo $category['Category']['id']; ?>">
        <td><?php echo $category['Category']['name']; ?></td>
        <td>teste<?php echo $category['Category']['name']; ?></td>
    </tr>
    <?php
    endforeach;
    ?>
        </tbody>
    </table>




</div>




<?php
$this->Js->get('#salvar');
    $this->Js->event('click',
        $this->Js->request(
            array(
                'action' => 'reorder',
            ),
            array(
                'method'=> 'post',
                'dataExpression' => true,
                'data' => '$("#sortable").sortable("serialize")',
                'async' => true,
                'update' => '#element'
            )
        )
    );
?>
<?php
$this->Js->get('#sortable');
$this->Js->sortable();
?>

 

 

 

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*