Chemin complet à partir du nœud racine en Javascript Fantaisie arbre

Je suis en utilisant la Fantaisie de l'arbre afin de remplir l'arbre, pour comprendre le code est indiqué

 var treeData = [{"title":"image_test","folder":true,"children":[{"title":"images5","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images4","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images3","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images2","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]},{"title":"images1","folder":true,"children":[{"title":"img_01.png","children":[]},{"title":"img_02.png","children":[]},{"title":"img_03.png","children":[]},{"title":"img_04.png","children":[]},{"title":"img_05.png","children":[]},{"title":"img_06.png","children":[]},{"title":"img_07.png","children":[]}]}]}];
$(function(){
$("#tree3").fancytree({
//     extensions: ["select"],
checkbox: true,
selectMode: 3,
source: treeData,
select: function(event, data) {
//Get a list of all selected nodes, and convert to a key array:
var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
return node.key;
});
$("#echoSelection3").text(selKeys.join(", "));
//Get a list of all selected TOP nodes
var selRootNodes = data.tree.getSelectedNodes(true);
//... and convert to a key array:
var selRootKeys = $.map(selRootNodes, function(node){
return node.key;
});
$("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
$("#echoSelectionRoots3").text(selRootNodes.join(", "));
},
dblclick: function(event, data) {
data.node.toggleSelected();
},
keydown: function(event, data) {
if( event.which === 32 ) {
data.node.toggleSelected();
return false;
}
},
//The following options are only required, if we have more than one tree on one page:
//             initId: "treeData",
cookieId: "fancytree-Cb3",
idPrefix: "fancytree-Cb3-"
});
});

La div utilisé est tree3.

<div id="tree3"></div>
<div>Selected keys: <span id="echoSelection3">-</span></div>
<div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>
<div>Selected root nodes: <span id="echoSelectionRoots3">-</span></div></div>

Maintenant, je veux que chaque fois que l'utilisateur vérifie le childnode le nom du nœud parent jusqu'à ce que le nœud racine est également indiqué pour cela j'ai utilisé

var selRootNodes = data.tree.getSelectedNodes(true);

mais n'a pas été en mesure d'obtenir le résultat dans echoselection comme childnode puis jusqu'au nœud racine

En fait, je veux envoyer la sélection pour le serveur de sorte qu'ils sont sauvés, car ils sont les chemins de fichiers.

Depuis que je suis en utilisant la population de l'arbre premier temps afin de bien vouloir garder avec moi. Si il y a une autre bonne option, veuillez fournir.

P. S; je veux envoyer de l'arbre chemin d'accès au serveur sous la forme de répertoire d'adresses /abc/acv/ac/xyz.png
Chemin complet à partir du nœud racine en Javascript Fantaisie arbre

OriginalL'auteur Zeeshan | 2014-03-12

Après la recherche et à la recherche en profondeur dans le code que j'ai trouvé la solution :

 $(function(){
var tree3 = $("#tree3").fancytree({
checkbox: true,
selectMode: 3,
source: $.ajax({
url: "/getlist",
dataType: "json"
}),
select: function(event, data) {
//Get a list of all selected nodes, and convert to a key array:
var selKeys =
$.map(data.tree.getSelectedNodes(), function(node) {
if(node.key != 0){
return node.key;
}
});
var rootstructures =
$.map(selKeys, function(item){
var tempnode = data.tree.getNodeByKey(item);
var tempstructure = [];
tempstructure.push(data.tree.getNodeByKey(item).title);  
while(tempnode.getParent().getParent()){
tempstructure.push(tempnode.getParent().title);
tempnode = tempnode.getParent();
}
tempstructure.reverse();
return tempstructure.join('/');
});
//WRITE DEBUG OUTPUT TO DIVS
$("#echoSelectionRoots4").text(rootstructures);
$("#echoSelection3").text(selKeys.join(", "));
//Get a list of all selected TOP nodes
var selRootNodes = data.tree.getSelectedNodes(true);
//... and convert to a key array:
var selRootKeys = $.map(selRootNodes, function(node){
return node.key;
});
$("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
$("#echoSelectionRoots3").text(selRootNodes.join(", "));
//-----------------
},
});
});

Cette application fonctionne et maintenant sur la sélection du chemin d'accès jusqu'à nœud racine est monté sur la echoSelectionRoots4 objet.

Exemple De Sortie : /image_test/image5/img_01.png, /image_test/image5/img_02.png etc

Génial, c'est exactement ce dont j'avais besoin 🙂 mais le code source pourrait utiliser un peu de nettoyage, il serait préférable de supprimer tous les trucs qui est pertinent pour le problème réel (keydown, dblclick, ...) et de corriger l'indentation...
ouais, Merci pour le nettoyage.. désolé pour la paresse 🙂
Pas de soucis, ton code m'a sauvé beaucoup de temps, merci 🙂

OriginalL'auteur Zeeshan

Vous devez vous connecter pour publier un commentaire.