jstree - selezione del nodo in base all'URL di navigazione corrente
-
28-10-2019 - |
Domanda
Oggi sto usando i cookie integrati di JStree per preservare le navigazioni degli utenti nell'albero.
Sul nodo fare clic sull'albero, l'utente viene reindirizzato alla pagina corrispondente nel mio sito e il nodo cliccato viene selezionato/evidenziato grazie all'integrazione dei cookie JStree.
Ora, vorrei selezionare/evidenziare i nodi nell'albero anche in base a una navigazione tra il sito Web, cioè un collegamento nel sito potrebbe anche essere un nodo nell'albero, ad esempio una griglia di righe che appare anche nell'albero.
La domanda è: come posso fare questa selezione/evidenziazione del nodo "manualmente" e penso anche che dovrei sapere da dove l'utente è arrivato alla pagina, dall'albero o da qualche altro link nel sito.
Grazie,
Soluzione
Ho già creato un approccio completo per questo usando JStree, evento Hashchange e URL reali reali in modo da ciò si adatta perfettamente alla tua idea e potresti lanciare i tuoi biscotti ma non in modo negativo. Questo funziona anche con il bookmarking e arrivando da un URL mentre guarda attraverso i nodi, quindi corrisponde ai collegamenti per selezionare il nodo. Questo è meglio con l'Ajax come dovrebbe essere quando possibile.
Sto commentando questo per te così puoi capirlo. L'esempio di funzionamento è qui www.kitgui.com/docs Questo mostra tutto il contenuto.
$(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');
});
Sentiti libero di chiedermi se hai più domande.