Dudas de cakephp » Tag: tree behavior

Dudas de cakephp » Tag: tree behavior - Recent Posts http://cakephp.hospedaxes.com/dudas/ Just another bbPress community en Thu, 09 Sep 2010 03:03:01 +0000 nuria en "Tree Behaviour o cómo crear una estructura jerárquica" http://cakephp.hospedaxes.com/dudas/topic/tree-behaviour-o-como-crear-una-estructura-jerarquica#post-22 Mie, 14 Oct 2009 08:42:35 +0000 nuria 22@http://cakephp.hospedaxes.com/dudas/ <blockquote>En esta ocasión hablaremos de cómo crear una estructura jerárquica utilizando el Tree Behavior de CakePHP. Este comportamiento facilita muchísimo las cosas a la hora de manipular árboles jerárquicos de datos. Utilizaremos también la librería de Javascript Ext JS para poder manipular el árbol gráficamente de manera sencilla, utilizando drag and drop. Lo primero que tendremos que hacer será añadir en la tabla de la base de datos de la entidad. Utilizando los nombres por defecto de Cake, serían los siguientes campos: <ul> <li>parent_id: hace referencia al padre del elemento.</li> <li>lft: almacena el identificador del elemento de la izquierda en el mismo nivel.</li> <li>rght: almacena el identificador del elemento de la derecha en el mismo nivel.</li> </ul> Incluiremos también los campos id y nombre, en una entidad denominada, por ejemplo, Categoria. El modelo lo haríamos de la siguiente manera: Este comportamiento tiene funciones muy útiles para la manipulación del árbol. Las más utilizadas quizás sean las siguientes: <ul> <li>children: devuelve los hijos de un nodo concreto, pudiendo seleccionar si deseamos obtener sólo los hijos directos o todos los hijos en el árbol.</li> <li>generatetreelist: función muy útil para obtener los elementos a introducir en un select de HTML.</li> <li>getpath: devuelve todo el path hasta el nodo especificado en un array.</li> <li>movedown y moveup: sirven para bajar o subir un nivel de un nodo del árbol.</li> <li>removefromtree: elimina un nodo del árbol sin perder la estructura, es decir, modificando el padre de sus hijos.</li> <li>reorder: reordena un nodo (arrastrando también a sus hijos) en función de los parámetros especificados.</li> </ul> Para realizar la manipulación visual del árbol de categorías crearemos las siguientes funciones en el controlador app/controllers/categorias_controller.php sería: <pre class="http://cakephp.hospedaxes.co/wp-admin/prettyprint"><code><?php class CategoriasController extends AppController{ var $helpers = array( 'Javascript'); // Función para organizar las categorías function organizar() {} function getnodes() { Configure::write('debug', 0); // obtener el identificador del padre que se envío por POST vía Ajax $parent = intval($this->params['form']['node']); // encontrar los hijos directos del nodo anterior $nodes = $this->Categoria->children($parent, true, null, 'Categoria.lft ASC'); $this->set(compact('nodes')); $this->render('getnodes', 'ajax'); } function reorder() { Configure::write('debug', 0); // delta es la diferencia en la posición (1 = nodo siguiente, -1 = nod anterior) $node = intval($this->params['form']['node']); $delta = intval($this->params['form']['delta']); if ($delta > 0) { $this->Categoria->movedown($node, abs($delta)); } elseif ($delta < 0) { $this->Categoria->moveup($node, abs($delta)); } exit('1'); } function reparent() { Configure::write('debug', 0); $node = intval($this->params['form']['node']); $parent = intval($this->params['form']['parent']); $position = intval($this->params['form']['position']); // guardamos el nuevo padre de la categoría $this->Categoria->id = $node; $this->Categoria->saveField('parent_id', $parent); // Si position == 0, nos movemos al inicio. // En otro caso, calculamos la distancia que nos moveremos ($delta). if ($position == 0) { $this->Categoria->moveup($node, true); } else { $count = $this->Categoria->childcount($parent, true); $delta = $count - $position - 1; if ($delta > 0) { $this->Categoria->moveup($node, $delta); } } exit('1'); } } ?></code></pre> Sólo nos quedaría hacer las vistas. En este caso, necesitamos crear 2 vistas: organizar.ctp y getnodes.ctp. <pre class="http://cakephp.hospedaxes.co/wp-admin/prettyprint">// app/views/categorias/organizar.ctp <?php echo $html->css('/js/ext-2.0.1/resources/css/ext-custom.css'); ?> <?php echo $javascript->link('/js/ext-2.0.1/ext-custom.js'); ?> <script type="http://cakephp.hospedaxes.co/wp-admin/text/javascript"> Ext.BLANK_IMAGE_URL = '<?php echo $html->url('/js/ext-2.0.1/resources/images/default/s.gif') ?>'; Ext.onReady(function(){ var getnodesUrl = '<?php echo $html->url('/categorias/getnodes') ?>'; var reorderUrl = '<?php echo $html->url('/categorias/reorder') ?>'; var reparentUrl = '<?php echo $html->url('/categorias/reparent') ?>'; var Tree = Ext.tree; var tree = new Tree.TreePanel({ el:'tree-div', autoScroll:true, animate:true, enableDD:true, containerScroll: true, rootVisible: true, loader: new Ext.tree.TreeLoader({ dataUrl:getnodesUrl }) }); var root = new Tree.AsyncTreeNode({ text:'Categorías', draggable:false, id:'root' }); tree.setRootNode(root); tree.setHeight('auto'); var oldPosition = null; var oldNextSibling = null; tree.on('startdrag', function(tree, node, event){ oldPosition = node.parentNode.indexOf(node); oldNextSibling = node.nextSibling; }); tree.on('movenode', function(tree, node, oldParent, newParent, position){ if (oldParent == newParent){ var url = reorderUrl; var params = {'node':node.id, 'delta':(position-oldPosition)}; } else { var url = reparentUrl; var params = {'node':node.id, 'parent':newParent.id, 'position':position}; } tree.disable(); Ext.Ajax.request({ url:url, params:params, success:function(response, request) { // if the first char of our response is zero, then we fail the operation, // otherwise we re-enable the tree if (response.responseText.charAt(0) != 1){ request.failure(); } else { tree.enable(); } }, failure:function() { // we move the node back to where it was beforehand and // we suspendEvents() so that we don't get stuck in a possible infinite loop tree.suspendEvents(); oldParent.appendChild(node); if (oldNextSibling){ oldParent.insertBefore(node, oldNextSibling); } tree.resumeEvents(); tree.enable(); alert("Oh no! Your changes could not be saved!"); } }); }); tree.render(); root.expand(); }); </script> <div id="tree-div"></div> </pre> Y la última vista: <pre class="http://cakephp.hospedaxes.co/wp-admin/prettyprint"><code><?php // app/views/categorias/getnodes.ctp $data = array(); foreach ($nodes as $node) {</code> <code>$data[] = array(</code> <code>"text" => $node['Categoria']['nombre'],</code> <code>"id" => $node['Categoria']['id']</code> <code>); } echo $javascript->object($data); ?></code></pre> Ya sólo nos quedaría descargarnos la librería <a title="http://cakephp.hospedaxes.co/wp-admin/Ext JS" href="http://www.extjs.com/" target="_blank">ExtJS</a> y copiarla en la carpeta /app/webroot/js. En el ejemplo, se ha utilizado la versión 2.0.1. Podemos ver una <a title="http://cakephp.hospedaxes.co/wp-admin/Ejemplo de funcionamiento de Tree Behaviour" href="http://cakephp.hospedaxes.com/pruebas/tree_behaviour" target="_blank">demostración de su funcionamiento</a>. <div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 289px; width: 1px; height: 1px;"> <pre style="display: block;">Categoria</pre> </div> </blockquote> <a href="http://cakephp.hospedaxes.com/tree-behaviour-o-como-crear-una-estructura-jerarquica">Tree Behaviour o cómo crear una estructura jerárquica</a>