javascript Javascript花式树中根节点的完整路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22355936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Complete path from the root node in Javascript Fancy tree
提问by Zeeshan
I am using Fancy tree to populate the tree, for understanding the code is shown
我使用花式树来填充树，为了理解代码显示
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-"
});
});
The div used is tree3.
使用的div是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>
Now i want that whenever the user checks the childnode the name of the parent node until the root node is also shown for this i have used
现在我希望每当用户检查子节点时父节点的名称，直到根节点也显示为此我使用过
var selRootNodes = data.tree.getSelectedNodes(true);
but was not able to get the result in echoselection as childnode and then until root node
但无法在 echoselection 中获得结果作为子节点，然后直到根节点
Actually I want to send the selection to the server so that they are saved since they are file paths.
实际上我想将选择发送到服务器，以便它们被保存，因为它们是文件路径。
Since I am using population of tree first time so kindly bear with me. If there is any other good option kindly provide.
由于我是第一次使用树的种群，所以请耐心等待。如果有其他好的选择，请提供。
P.S; I want to send the tree path to server in the form of directory address /abc/acv/ac/xyz.png
PS; 我想以目录地址 /abc/acv/ac/xyz.png 的形式将树路径发送到服务器
回答by Zeeshan
After searching and looking deep into the code i found the 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(", "));
// -----------------
},
});
});
This implementation works and now on selection the path till root node is populated on the echoSelectionRoots4 object.
此实现有效，现在选择路径，直到在 echoSelectionRoots4 对象上填充根节点。
Example Output: /image_test/image5/img_01.png, /image_test/image5/img_02.png etc
示例输出： /image_test/image5/img_01.png, /image_test/image5/img_02.png etc
