J'utilise le plugin JQuery jsTree, http://www.jstree.com/ Je peux développer tout l'arborescence avec la méthode suivante:
$("#tree").jstree("open_all");
et aussi un noeud spécifique:
$("#tree").jstree("open_node", $('#childNode'));
J'ai du mal à ouvrir une branche de l'arbre, ouvrir une branche l'ouvre bien mais n'ouvre pas son parent s'il en a un.
Est-ce que quelqu'un a réussi à le faire avec jsTree? Tenez-moi au courant si vous avez besoin de plus d'informations.
Merci
Eef
Vous pouvez utiliser la liaison
$("#tree").bind("open_node.jstree", function (event, data) {
if((data.inst._get_parent(data.rslt.obj)).length) {
data.inst._get_parent(data.rslt.obj).open_node(this, false);
}
});
Votre code pour la branche ouverte est correct.
Par exemple. Source de l'arbre:
<div id="treeTask">
<ul>
<li id="node_37"><a href="#">TEST1</a>
<ul>
<li id="node_38"><a href="#">TEST2</a></li>
<li id="node_39"><a href="#">TEST3</a></li>
</ul>
</li>
</ul>
</div>
Nœud ouvert:
$("#treeTask").jstree("open_node", $("#node_38"));
Essayez ce code pour ouvrir le noeud jusqu'au nième niveau
$("#myTree").jstree({options}).bind('loaded.jstree', function (e, data) {
/**
* Open nodes on load (until x'th level)
*/
var depth = 3;
data.inst.get_container().find('li').each(function (i) {
if (data.inst.get_path($(this)).length <= depth) {
data.inst.open_node($(this));
}
});
});
Voici une fonction qui peut ouvrir un noeud spécifique et tous ses parents.
function expandNode(nodeID) {
// Expand all nodes up to the root (the id of the root returns as '#')
while (nodeID != '#') {
// Open this node
$("#jstree").jstree("open_node", nodeID)
// Get the jstree object for this node
var thisNode = $("#jstree").jstree("get_node", nodeID);
// Get the id of the parent of this node
nodeID = $("#jstree").jstree("get_parent", thisNode);
}
}
j'ai trouvé que le code de Ted fonctionnait, mais j'ai dû le changer un peu:
$('#jsTree').bind("open_node.jstree", function (event, data) {
if((data.inst._get_parent(data.rslt.obj)).length) {
data.inst.open_node(data.inst._get_parent(data.rslt.obj), false,true);
}
});
utilisez-le si vous utilisez JSON
$("#treeId").on
('loaded.jstree', function() {
$("#treeId").jstree("open_node", $("#nodeId"));
});
Aucune des précédentes ne fonctionnait pour moi, alors j'ai créé ce code, et ça marche comme un charme :)
$('#tree').on('open_node.jstree', function (event, data) {
if(data.node.parent !== "#") {
data.instance.open_node(data.node.parent);
}
});
// Expand pasted, dragged and dropped node for jstree 3.3.1
var objtree = $('#jstree');
objtree.bind('paste.jstree', function(e, d) { objtree.jstree('open_all', '#' + d.parent); });
$(document).bind('dnd_move.vakata', function(e, d) { objtree.jstree('open_all', $(d.event.target).closest('.jstree-node').attr('id')); });
$(document).bind('dnd_stop.vakata', function(e, d) { objtree.jstree('open_all', $(d.event.target).closest('.jstree-node').attr('id')); });