0

Estoy usando jsTree (3.3.2) para mostrar una estructura jerárquica de entidades. La forma en que lo tengo configurado es para que cargue el json con la estructura completa tomando como nodo raíz el nodo al que pertenece el usuario autenticado, pero realmente no me es funcional; del lado del servidor mediante una función recursiva genero el json que implica efectuar múltiples consultas a la base de datos. Necesito su ayuda para configurar la función de forma que pueda diferenciar la carga del nodo raíz, de la llamada a la carga de los nodos hijos (directos al nodo raíz). He visto implementaciones en la página del pluggin, pero hacen la diferenciación del nodo raíz estableciendo el valor del id='#' y no creo me sirva, ya que necesito tener el id de cada uno de los nodos para completar el resto de las vistas.

Este es mi código actual, he quitado la sección de configuración del menú contextual.

$('#arbol').jstree({
        'core': {
            'strings': {
                'Loading ...': 'Cargando ...'
            },
            'force_text': true,
            'themes': {
                'responsive': true,
                'variant': 'small',
                'stripes': false
            },
            'multiple': false,
            'animation': 135,
            'expand_selected_onload': false,
            'worker': true,
            'dblclick_toggle': true,
            'data': {
                'url': Routing.generate('app_renderArbol')
            },
            'check_callback': function(o, n, p, i, m) {
                // Esta funcion chequea el tipo de nodo seleccionado para evitar se convierta en draggable
            },
        },
        'plugins': ["state", "dnd", "contextmenu"],
        'state': {'key': 'arbol_state'},
        'dnd': {inside_pos: "last"}
    }).on('move_node.jstree', function(e, data) {
        e.preventDefault();
        $.ajax({
            datatypes: 'GET',
            method: 'JSON',
            url: Routing.generate('estructuraOrganizativa_moverCMF', {'cmf': data.node.id, 'gbt': data.parent}),
            beforeSend: function() {
                $('#indicador').addClass('cargando-satisfactorio').fadeIn('fast');
            }
        }).done(function(data) {
            $('#indicador').html(data.message);
        }).fail(function(jqXHR) {
            $('#indicador').addClass('cargando-error').html(jqXHR.responseText);
            data.instance.refresh();
        }).always(function(jqXHR, type) {
            if (type !== 'success') {
                $('#indicador').fadeOut(5500, function() {
                    $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                });
            } else {
                $('#indicador').fadeOut(4500, function() {
                    $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                });
            }
        });
    }).on('select_node.jstree', function(event, data) {
        event.preventDefault();
        if (data && data.selected && data.selected.length) {
            var nodo = data.instance.get_selected(true)[0];

            cargarVistaCentral(nodo); // esta trae de vuelta la vista central de la app basándose en el nodo seleccionado

        } else {
            return false;
        }
    });

Estas son las funciones en el controlador para devolver el arreglo json (un action y una función recursiva). Por supuesto en caso de poder implementar adecuadamente el js, el controlador sería mucho más simple: obtener el nodo raíz a partir de los datos del usuario autenticado, y el resto de los nodos hijos (hijos directos) más simple de obtener: $nodo->getChildren(true), bueno ya es parte del modelo.

public function renderArbolAction(Request $request)
    {
        if ($request->isXmlHttpRequest())
        {
            $estructuraOrganizativa = $this->getUser()->getEstructuraOrganizativa();

            $arbol[] = array(
                'id' => $estructuraOrganizativa->getId(),
                'text' => $estructuraOrganizativa->getTitle(),
                'icon' => 'icon-sitemap', // \AppBundle\Utils\UI::getIconForTreeNode($estructuraOrganizativa)
                'data' => array(
                    'tipoEstructura' => array(
                        'id' => $estructuraOrganizativa->getTipoEstructuraOrganizativa()->getId(),
                        'nombre' => $estructuraOrganizativa->getTipoEstructuraOrganizativa()->getNombre(),
                    ),
                    'parent_id' => '#',
                    'rol_id' => $this->getUser()->getRol()->getId(),
                ),
                'state' => array(
                    'opened' => true,
                    'selected' => false
                ),
                'li_attr' => array(
                    'title' => $estructuraOrganizativa->getTitle(),
                ),
                ' a_attr' => array(
                    'href' => '#',
                ),
                'children' => $this->BuildChildsRecursive($estructuraOrganizativa),
            );

            $response = new Response(json_encode($arbol));
            $response->headers->set('Content-Type', 'application/json');

            return $response;
        } else
        {
            throw $this->createNotFoundException("Recurso no encontrado");
        }
    }

private function BuildChildsRecursive(EstructuraOrganizativa $nodo)
    {
        $nodosParaJSON = array();
        $repositoryEstructuraOrganizativa = $this->getDoctrine()->getRepository('AppBundle:EstructuraOrganizativa');
        $cantidadHijos = $repositoryEstructuraOrganizativa->childCount($nodo, true);

        if ($cantidadHijos === 0)
        {
            return array();
        } else
        {
            $hijos = $repositoryEstructuraOrganizativa->children($nodo, true);

            foreach ($hijos as $hijo)
            {
                if (in_array($hijo->getTipoEstructuraOrganizativa()->getId(), array(7, 8)))
                {
                    if (!$this->get('security.authorization_checker')->isGranted(array('ROLE_ESP_NAC', 'ROLE_ESP_PROV', 'ROLE_CONS_NAC', 'ROLE_CONS_PROV')))
                    {
                        continue;
                    }
                }
                $nodosParaJSON[] = array(
                    'id' => $hijo->getId(),
                    'text' => $hijo->getTitle(),
                    'icon' => \AppBundle\Utils\UI::getIconForTreeNode($hijo),
                    'data' => array(
                        'tipoEstructura' => array(
                            'id' => $hijo->getTipoEstructuraOrganizativa()->getId(),
                            'nombre' => $hijo->getTipoEstructuraOrganizativa()->getNombre(),
                        ),
                        'parent_id' => $hijo->getParent()->getId(),
                        'rol_id' => $this->getUser()->getRol()->getId(),
                    ),
                    'state' => array(
                        'opened' => false,
                        'selected' => false
                    ),
                    'li_attr' => array(
                        'title' => $hijo->getTitle(),
                    ),
                    ' a_attr' => array(
                        'href' => '#',
                    ),
                    'children' => $this->BuildChildsRecursive($hijo),
                );
            }

            return $nodosParaJSON;
        }
    }

1 respuesta 1

1

Bueno, he encontrado la solución y sí se basa en la comparación del id del nodo con el caracter '#' como vi en la documentaci'on oficial; básicamente mi solución se basa en tener dos url de donde proviene el json que espera jsTree para generar el árbol.

$('#arbol').jstree({
        'core': {
            'strings': {
                'Loading ...': 'Cargando ...'
            },
            'force_text': true,
            'themes': {
                'responsive': true,
                'variant': 'small',
                'stripes': false
            },
            'multiple': false,
            'animation': 135,
            'expand_selected_onload': false,
            'worker': true,
            'dblclick_toggle': true,
            'data': {
                'url': function(node){
                     return node.id === '#' ? Routing.generate('app_renderArbolRaiz') : Routing.generate('app_renderArbolHijos', {'id': node.id});
                }
            },
            'check_callback': function(o, n, p, i, m) {
                // Esta funcion chequea el tipo de nodo seleccionado para evitar se convierta en draggable
            },
        },
        'plugins': ["state", "dnd", "contextmenu"],
        'state': {'key': 'arbol_state'},
        'dnd': {inside_pos: "last"}
    }).on('move_node.jstree', function(e, data) {
        e.preventDefault();
        $.ajax({
            datatypes: 'GET',
            method: 'JSON',
            url: Routing.generate('estructuraOrganizativa_moverCMF', {'cmf': data.node.id, 'gbt': data.parent}),
            beforeSend: function() {
                $('#indicador').addClass('cargando-satisfactorio').fadeIn('fast');
            }
        }).done(function(data) {
            $('#indicador').html(data.message);
        }).fail(function(jqXHR) {
            $('#indicador').addClass('cargando-error').html(jqXHR.responseText);
            data.instance.refresh();
        }).always(function(jqXHR, type) {
            if (type !== 'success') {
                $('#indicador').fadeOut(5500, function() {
                    $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                });
            } else {
                $('#indicador').fadeOut(4500, function() {
                    $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                });
            }
        });
    }).on('select_node.jstree', function(event, data) {
        event.preventDefault();
        if (data && data.selected && data.selected.length) {
            var nodo = data.instance.get_selected(true)[0];

            cargarVistaCentral(nodo); // esta trae de vuelta la vista central de la app basándose en el nodo seleccionado

        } else {
            return false;
        }
    });

y del lado del servidor las dos actions que corresponden a cada routing:

public function renderArbolRaizAction(Request $request)
    {
        if ($request->isXmlHttpRequest())
        {
            $arbol = array();
            $estructuraOrganizativa = $this->getUser()->getEstructuraOrganizativa();

            $arbol[] = array(
                'id' => $estructuraOrganizativa->getId(),
                'text' => $estructuraOrganizativa->getTitle(),
                'icon' => \AppBundle\Utils\UI::getIconForTreeNode($estructuraOrganizativa),
                'data' => array(
                    'tipoEstructura' => array(
                        'id' => $estructuraOrganizativa->getTipoEstructuraOrganizativa()->getId(),
                        'nombre' => $estructuraOrganizativa->getTipoEstructuraOrganizativa()->getNombre(),
                    ),
                    'parent_id' => (true === is_null($estructuraOrganizativa->getParent()) ? '#' : $estructuraOrganizativa->getId()),
                    'rol_id' => $this->getUser()->getRol()->getId(),
                ),
                'state' => array(
                    'opened' => true,
                    'selected' => false
                ),
                'li_attr' => array(
                    'title' => $estructuraOrganizativa->getTitle(),
                ),
                ' a_attr' => array(
                    'href' => '#',
                ),
                'children' => $this->getChildrens($estructuraOrganizativa)
            );

            $response = new Response(json_encode($arbol));
            $response->headers->set('Content-Type', 'application/json');

            return $response;
        } else
        {
            throw $this->createNotFoundException("Recurso no encontrado");
        }
    }

/**
 * Funcion auxiliar para obtener los hijos directos del nodo raiz 
 **/
private function getChildrens(EstructuraOrganizativa $estructuraOrganizativa)
    {
        $puedeContenerHijos = !in_array($estructuraOrganizativa->getTipoEstructuraOrganizativa()->getId(), array(6, 7, 8));
        if ($puedeContenerHijos === true)
        {
            $nodosParaJSON = array();
            $hijos = $this->getDoctrine()->getRepository('AppBundle:EstructuraOrganizativa')->children($estructuraOrganizativa, true);
            foreach ($hijos as $hijo)
            {
                $actualPuedeContenerHijos = !in_array($hijo->getTipoEstructuraOrganizativa()->getId(), array(6, 7, 8));
                if (in_array($hijo->getTipoEstructuraOrganizativa()->getId(), array(7, 8)))
                {
                    if (!$this->get('security.authorization_checker')->isGranted(array('ROLE_ESP_NAC', 'ROLE_ESP_PROV', 'ROLE_CONS_NAC', 'ROLE_CONS_PROV')))
                    {
                        continue;
                    }
                }
                $nodosParaJSON[] = array(
                    'id' => $hijo->getId(),
                    'text' => $hijo->getTitle(),
                    'icon' => \AppBundle\Utils\UI::getIconForTreeNode($hijo),
                    'data' => array(
                        'tipoEstructura' => array(
                            'id' => $hijo->getTipoEstructuraOrganizativa()->getId(),
                            'nombre' => $hijo->getTipoEstructuraOrganizativa()->getNombre(),
                        ),
                        'parent_id' => $hijo->getParent()->getId(),
                        'rol_id' => $this->getUser()->getRol()->getId(),
                    ),
                    'state' => array(
                        'opened' => false,
                        'selected' => false
                    ),
                    'li_attr' => array(
                        'title' => $hijo->getTitle(),
                    ),
                    ' a_attr' => array(
                        'href' => '#',
                    ),
                    'children' => $actualPuedeContenerHijos,
                );
            }

            return $nodosParaJSON;
        } else
        {
            return false;
        }
    }

public function renderArbolHijosAction(Request $request)
    {
        if ($request->isXmlHttpRequest())
        {
            $id = $request->get('id', 0);
            $estructura = $this->getDoctrine()->getRepository('AppBundle:EstructuraOrganizativa')->findOneJoinTipoEstructuraOrganizativa($id);
            if (is_null($estructura))
            {
                $vacio = array();
                $response = new Response(json_encode($vacio));
                $response->headers->set('Content-Type', 'application/json');

                return $response;
            }


            $hijosEstructura = $this->getDoctrine()->getRepository('AppBundle:EstructuraOrganizativa')->getChildren($estructura, true);
            $hijos = array();
            foreach ($hijosEstructura as $h)
            {
                if (in_array($h->getTipoEstructuraOrganizativa()->getId(), array(7, 8)))
                {
                    if (!$this->get('security.authorization_checker')->isGranted(array('ROLE_ESP_NAC', 'ROLE_ESP_PROV', 'ROLE_CONS_NAC', 'ROLE_CONS_PROV')))
                    {
                        continue;
                    }
                }

                $puedeContenerHijos = !in_array($h->getTipoEstructuraOrganizativa()->getId(), array(6, 7, 8));

                $hijos[] = array(
                    'id' => $h->getId(),
                    'text' => $h->getTitle(),
                    'icon' => \AppBundle\Utils\UI::getIconForTreeNode($h),
                    'data' => array(
                        'tipoEstructura' => array(
                            'id' => $h->getTipoEstructuraOrganizativa()->getId(),
                            'nombre' => $h->getTipoEstructuraOrganizativa()->getNombre(),
                        ),
                        'parent_id' => $h->getParent()->getId(),
                        'rol_id' => $this->getUser()->getRol()->getId(),
                    ),
                    'state' => array(
                        'opened' => false,
                        'selected' => false
                    ),
                    'li_attr' => array(
                        'title' => $h->getTitle(),
                    ),
                    ' a_attr' => array(
                        'href' => '#',
                    ),
                    'children' => $puedeContenerHijos,
                );
            }

            $response = new Response(json_encode($hijos));
            $response->headers->set('Content-Type', 'application/json');

            return $response;
        } else
        {
            throw $this->createNotFoundException("Recurso no encontrado.");
        }
    }

Debo destacar que la Entidad EstructuraOrganizativausa extensiones de doctine que me facilitan el trabajo con estructuras en forma de árbol, e incluso tiene funciones para devolver todo un html anidado que es muy probable jsTree pueda usar, pero el nivel de personalización que requiere mi árbol de estructuras, así como una serie de datos que almaceno por cada nodo, no me sirve que el Repositorygenere el html.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.