Jstree - Selección de nodo basada en URL navegada actual

Question

Hoy estoy usando las cookies incorporadas del jstree para preservar las navegaciones de los usuarios en el árbol.

En el nodo, haga clic en el árbol, el usuario se redirige a la página correspondiente en mi sitio y el nodo hecho se selecciona/resalta gracias a la integración de las cookies JStee.

Ahora, me gustaría seleccionar/resaltar nodos en el árbol también basado en una navegación entre el sitio web, es decir, un enlace en el sitio también podría ser un nodo en el árbol, por ejemplo, una cuadrícula de filas que también aparece. en el árbol.

La pregunta es cómo puedo hacer esta selección/resaltado de nodos 'manualmente' y también creo que debería saber de dónde llegó el usuario a la página, desde el árbol o desde algún otro enlace del sitio.

Gracias,

Answer 1

Ya construí un enfoque completo para esto usando el evento Jstree, Hashchange y las URL reales reales de SEO, para que esto se ajuste a su idea de manera bastante simple y podría tirar sus galletas, pero no de mala manera. Esto también funciona con marcadores y llegando de una URL, ya que mira a través de los nodos y luego coincide con los enlaces para seleccionar el nodo. Sin embargo, esto es mejor con AJAX como debería ser cuando sea posible.

Te estoy comentando esto para que puedas entenderlo. El ejemplo de trabajo está aquí www.kitgui.com/docs Eso muestra todo el contenido.

$(function () {
        // used to remove double reload since hash and click are intertwined
    var cancelHashChange = false,
        // method sets the selector based off of URL input
    setSelector = function (path) {
        var startIndex = path.indexOf('/docs');
        if (startIndex > -1) {
            path = path.substr(startIndex);
        }
        path = path.replace('/docs', '').replace('/', '');
        if ($.trim(path) === '') { path = 'overview'; }
        return '.' + path;
    };
        // sets theme without the folders, plain jane
    $('.doc-nav').jstree({
        "themes": {
            "theme": "classic",
            "dots": true,
            "icons": false
        }
    }).bind("loaded.jstree", function (event, data) {
        // when loaded sets initial state based off of priority hash first OR url
        if (window.location.hash) { // if hash defined then set tree state
            $.jstree._focused().select_node(selector);
            $(setSelector(window.location.hash.substr(1)) + ' a:first').trigger('click');
        } else { // otherwise base state off of URL
            $.jstree._focused().select_node(setSelector(window.location.pathname));
        }
    });
        // all links within the content area if referring to tree will affect tree
        // and jump to content instead of refreshing page
    $('.doc-nav a').live('click', function (ev) {
        var $ph = $('<div />'), href = $(this).attr('href');
        ev.preventDefault();
        cancelHashChange = true;
            // sets state of hash
        window.location = '#' + $(this).attr('href');
        $('.doc-content').fadeOut('fast');
            // jQuery magic load method gets remote content (John Resig is the man!!!)
        $ph.load($(this).attr('href') + ' .doc-content', function () {
            cancelHashChange = false;
            $('.doc-content').fadeOut('fast', function () {
                $('.doc-content').html($ph.find('.doc-content').html()).fadeIn('fast');
            });
        });
    });
        // if doc content is clicked and has referring tree content, 
        // affect state of tree and change tree content instead of doing link
    $('.doc-content a').live('click', function (ev) {
        ev.preventDefault();
        if ($(this).attr('href').indexOf('docs/') > -1) {
            $.jstree._focused().select_node(setSelector($(this).attr('href')));
            $(setSelector($(this).attr('href')) + ' a:first').trigger('click', false);
        }
    });
        // if back/forward are used, maintain state of tree as if it was being clicked
        // refers to previously defined click event to avoid double-duty
        // but requires ensuring no double loading
    window.onhashchange = function () {
        if (cancelHashChange) { cancelHashChange = false; return; }
        $.jstree._focused().select_node(setSelector(window.location.hash.substr(1)));
        $(setSelector(window.location.hash.substr(1)) + ' a:first').trigger('click', false);
    };
    $('#top-doc-link').closest('li').addClass('active');
});

No dude en preguntarme si tiene más preguntas.