0

Estoy tratando de implementar un treeview con jquery, el cual pueda insertar, editar y eliminar. He buscado algunos ejemplos, pero hasta no he logrado funcionar. Me gustaría que pudieran recomendar algun ejemplo. Pero hasta ahora he tratado de probar jstree-1, el cual dejo el ejemplo en un link:

https://drive.google.com/file/d/0B4VwLG0Dpi3tSGdRU0Q2R0FBOTA/view

Tratando de manipular la librería, tengo lo siguiente:

<div id="myjstree">
<ul>
    <li>Inicio
    <ul>
        <li>Nodo 1
            <ul>
                <li data-jstree='{ "icon":"glyphicon glyphicon-folder-open" }' class="nodo" data-id="1.1">Nodo 1.1</li>
            </ul>

            </li>
        <li>Nodo 2
            <ul>
                <li data-jstree='{ "icon":"glyphicon glyphicon-folder-open" }' class="nodo"  data-id="2.1">Nodo 2.1</li>
                <li data-jstree='{ "icon":"glyphicon glyphicon-folder-open" }'>Nodo 2.2</li>
                <li data-jstree='{ "icon":"glyphicon glyphicon-folder-open" }'>Nodo 2.3
                    <ul>
                        <li data-jstree='{ "icon":"glyphicon glyphicon-thumbs-up" }'>Nodo 2.3.1</li>
                        <li data-jstree='{ "icon":"glyphicon glyphicon-thumbs-up" }'>Nodo 2.3.2</li>
                        <li data-jstree='{ "icon":"glyphicon glyphicon-thumbs-up" }'>Nodo 2.3.3
                            <ul>
                                <li data-jstree='{ "icon":"glyphicon glyphicon-thumbs-up" }'>Nodo 2.3.3.1</li>
                            </ul>
                        </li>

                    </ul>

                </li>
            </ul>

            </li>
        </ul>

        </li>
</ul>
</div>

Lo que deseo es poder obtener el data-id de la etiqueta li, y lo trato de la siguiente forma:

$("li.nodo").click(function (e) {   
       var nodo=$(this).data("id");
       alert("node_id: " + nodo); 
    });
});

$('#myjstree').jstree({ "themes" : { "stripes" : true }});

Pero no funciona el evento click de li.nodo para obtener el data. ¿Alguien tiene algun otro ejemplo o alguna idea de como hacerlo funcionar?

Segun la librería se captura los eventos click de esta forma:

 $('#myjstree').on("select_node.jstree", function (e, data) {

        alert("node_id: " + data.node.id); 
    });

pero si uso esta librería, por lo menos necesito capturar el data-id de la clase nodo del li. Si tienen algún idea, se lo agradecería mucho

1
  • Yo uso JStree, en un rato te comparto un ejemplo, con la diferencia de que los nodos del árbol se cargan dinámicamente desde un json generado del lado del servidor
    – Francisco
    el 15 ene. 2021 a las 16:11

1 respuesta 1

1

Este es un ejemplo del uso de la librería JSTree, teniendo en cuenta que la carga de los nodos se realiza desde una función del lado del servidor que retorna un JSON en el formato requerido por JSTree, tu caso particular estás diseñando el árbol con html directo, pero si lo deseas te puedes pasar a esta modalidad que la considero óptima siempre y cuando sepas generar una estructura recursiva de nodos en formato JSON desde tu backend.

$('#arbol').jstree({
        'core': {
            'strings': {
                'Loading ...': 'Cargando ...'
            },
            'force_text': true,
            'themes': {
                'responsive': true,
                'variant': 'small',
                'stripes': false
            },
            ui: {"select_limit": 1},
            'multiple': false,
            'animation': 135,
            'expand_selected_onload': false,
            'worker': true,
            'dblclick_toggle': true,
            'state': {
                'key': 'jstreest',
                'ttl': false,
            },
            '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) {
                if (m && m.dnd && m.pos !== 'i') {
                    return false;
                }
                if (o === "move_node") {
                    if (this.get_node(n).parent === this.get_node(p).id) {
                        return false;
                    }

                    if (this.get_node(n).data.rol_id !== 2) {
                        return false;
                    }

                    if (this.get_node(n).data.tipoEstructura.id !== 4) {
                        return false;
                    }

                    if (this.get_node(p).data.tipoEstructura.id !== 3) {
                        return false;
                    }
                }
                return true;
            }
        },
    }).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);            
        } else {
            return false;
        }
    });

Este es el arreglo que retorna el servidor, en este caso desde PHP, revisa las llaves del arreglo para poder obtener en el javascript la información deseada de cada nodo:

$arbol[] = array(
                'id' => $encodedInternalId,
                'text' => $estructuraOrganizativa->getTitle(),
                'icon' => $ui->getIconForTreeNode($estructuraOrganizativa->getTipoEstructuraOrganizativa()->getId()),
                'data' => array(
                    'tipoEstructura' => array(
                        'id' => $estructuraOrganizativa->getTipoEstructuraOrganizativa()->getId(),
                        'nombre' => $estructuraOrganizativa->getTipoEstructuraOrganizativa()->getNombre(),
                    ),
                    'parent_id' => (true === is_null($estructuraOrganizativa->getParent()) ? '#' : $uuidEncoder->encode($estructuraOrganizativa->getParent()->getInternalId())),
                    'rol_id' => $this->getUser()->getRol()->getId(),
                    'obj_asoc' => $this->getObjetoAsociado($estructuraOrganizativa, $em, $uuidEncoder),
                ),
                'state' => array(
                    'opened' => true,
                    'selected' => false
                ),
                'li_attr' => array(
                    'title' => $estructuraOrganizativa->getTitle(),
                ),
                ' a_attr' => array(
                    'href' => '#',
                ),
                'children' => $this->getChildrens($estructuraOrganizativa, $uuidEncoder, $ui)
            );

Hay una llave específica en ese arreglo, 'data', en la que puedes enviar dentro del json toda la información que necesites, en este caso envio un objeto que contiene data empleada en un menú contextual del JSTree (esa parte no la muestro en este código).

Y por úlitmo revisa la implementación del evento 'select_node.jstree' para que tengas una idea de cómo obtener el id del nodo seleccionado, u otra información contenida en la data de ese nodo seleccionado.

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.