[英]Complete path from the root node in Javascript Fancy tree
I am using Fancy tree to populate the tree, for understanding the code is shown 我正在使用Fancy树来填充树,以便了解代码
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.
如果有任何其他好的选择,请提供。
PS; PS; I want to send the tree path to server in the form of directory address /abc/acv/ac/xyz.png
我想以目录地址/abc/acv/ac/xyz.png的形式将树路径发送到服务器
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
/ /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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.