打印从根节点到叶节点的所有路径
Print all paths from root node to leaf nodes - javascript
function formCategoryTrees(object) {
_.each(object,function(objectValues){
var leafCategoryId = objectValues["id"];
var leafCategoryName = objectValues["name"];
console.log(leafCategoryName+""+leafCategoryId );
if (objectValues.hasOwnProperty("children")) {
if (typeof objectValues["children"] == 'object')
console.log("In");
formCategoryTrees(objectValues["children"]);
}else{
console.log(leafCategoryName);
}
})
}
所以我想显示分类树如下: Mobile &配件->手机
移动,附件->充电器
My JS Fiddle: http://jsfiddle.net/tfa8n5tj/
参见http://jsfiddle.net/sjmcpherso/kc9fehyz/,这里我使用递归创建了一个列表元素的分层集&迭代。由于在循环中对DOM的操作会极大地影响性能,因此我创建了一个虚拟DOM,并在流程结束时将其附加到实际DOM上。
var vDOM = document.createDocumentFragment(); //Create a Document Fragment to store your Virtual DOM
function formCategoryTrees(object,par) { //Use the parent node as a parameter to create hierarchy
var ul = document.createElement('ul');
_.each(object,function(objectValues ){
var li = document.createElement('li');
var leafCategoryId = objectValues["id"];
var leafCategoryName = objectValues["name"];
li.appendChild(document.createTextNode(leafCategoryName + " " + leafCategoryId));
if(objectValues["children"]) {
formCategoryTrees(objectValues["children"],li);
}
ul.appendChild(li);
})
par.appendChild(ul); //Append to the parent node after each iteration
}
formCategoryTrees(object.records,vDOM);
document.body.appendChild(vDOM); //Append your Virtual DOM to your page
我相信你希望你的函数看起来像这样:
function formCategoryTrees(object, parentNode) {
var div = document.getElementById("output");
_.each(object,function(objectValues){
var leafCategoryId = objectValues["id"];
var leafCategoryName = objectValues["name"];
if(parentNode === null){
div.innerHTML = div.innerHTML + leafCategoryName + " " + leafCategoryId +"</br>";
} else {
div.innerHTML = div.innerHTML + parentNode + "->" + leafCategoryName + " " + leafCategoryId + "</br>";
}
var hasChildren = objectValues.hasOwnProperty("children");
var childValue = objectValues["children"];
if(hasChildren && childValue !== null) {
formCategoryTrees(objectValues["children"], leafCategoryName);
}
});
}
formCategoryTrees(object.records, null);
相关文章:
- 节点命令不执行星号路径
- Vivus JS似乎没有动画某些<路径>节点
- 如何在 JStree 3 中显示叶节点的类似文件的图标
- 在angularJS中从树视图获取叶节点深度
- Raphael JS选择路径/对象/节点的特定实例
- 在选定节点的有向、未加权图中查找所有路径
- 如何访问节点模块中具有相对路径的文件
- 如何根据叶值显示JSON树中的特定路径
- 通过对象的嵌套集合进行递归总是在第一个叶节点处终止
- 多个“d3.js树状图”节点可以指向同一个叶节点吗?
- 将项目发布到叶节点时,没有通知传播到集合节点
- 我想隐藏树网格(带列的树面板)中非叶节点上的复选框
- jsTree :如何从 jstree 获取所有叶节点
- EXTJS 4.1如何在树面板中选择下一个叶节点
- dojodijittree:如何管理父节点、子节点和叶节点
- 当我在sencha touch中从另一个视图点击后退按钮时,没有导航到叶节点
- 在叶节点上设置单击事件
- 打印从根节点到叶节点的所有路径
- 如何在动态树的叶节点中显示复选框
- 如何将在非叶节点之前显示加号的方式更改为在extjs树面板中包含任何子节点的节点之前显示plus