jstree-현재 탐색 된 URL을 기반으로 노드 선택

Question

오늘 저는 트리에서 사용자 탐색을 유지하기 위해 jsTree의 내장 쿠키를 사용하고 있습니다.

트리에서 노드를 클릭하면 사용자가 내 사이트의 해당 페이지로 리디렉션되고 jsTree 쿠키 통합 덕분에 클릭 된 노드가 선택 / 강조 표시됩니다.

이제 웹 사이트 간의 탐색을 기반으로 트리에서 노드를 선택 / 강조 표시하겠습니다. 즉, 사이트의 링크가 트리의 노드 (예 : 행 그리드) 일 수도 있습니다.트리에도 표시됩니다.

질문은 어떻게이 '수동'노드 선택 / 강조 표시를 수행 할 수 있는지이며, 사용자가 페이지에 도착한 위치, 트리 또는 사이트의 다른 링크를 통해 알아야한다고 생각합니다.

감사합니다.

Answer 1

I already built a complete approach for this using jsTree, hashchange event and actual real SEO-able URLs so this would fit into your idea quite simply and you could toss your cookies but not in a bad way. This also works with bookmarking and arriving from a URL as it looks through the nodes then matches the links to select the node. This is best with AJAX though as it should be when possible.

I'm commenting this for you so you can understand it. The working example is here www.kitgui.com/docs that shows all the content.

$(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');
});

Feel free to ask me if you have more questions.