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ái mucho más simple.
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;
}
}