如何在 JavaScript 中为 JSON/XML 数据生成 MLM（多级营销）树
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4476442/
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
How to generate a tree for MLM ( Multi-Level Marketing ) in JavaScript for either JSON / XML data
提问by Pratik
I have some data like this : (AT sql sERVER)
我有一些这样的数据：（AT sql sERVER）
MemberID,ParemtID,Amt,OtherInfo
1, NULL, 200,dfdsf
2, 1, 300,DFDF
3, 1, 400,DFS
4, 3, 75,NULL
Now I want build Treelike this :
Only using JS.
Above data can be passed in JSON / XML / CSV / Formatted Text
How can i generate such dynamic tree in JS only ?
Please don't suggest PHP / .NET solutions.
I would prefer a JQuery.
现在我想像这样构建树：
只使用 JS。以上数据可以以 JSON / XML / CSV / Formatted Text 格式传递 我如何仅在 JS 中生成这样的动态树？请不要建议 PHP / .NET 解决方案。我更喜欢 JQuery。
回答by David Murdoch
And, here you go:
而且，给你：
http://jsfiddle.net/vVmcC/http://jsfiddle.net/vVmcC/4/
http://jsfiddle.net/vVmcC/http://jsfiddle.net/vVmcC/4/
You'll want to style it up yourself, obviously. But this should get you started:
很明显，你会想要自己设计风格。但这应该让你开始：
var members = [
{memberId : 1, parentId:null, amount:200, otherInfo:"blah"},
{memberId : 2, parentId:1, amount:300, otherInfo:"blah1"},
{memberId : 3, parentId:1, amount:400, otherInfo:"blah2"},
{memberId : 4, parentId:3, amount:500, otherInfo:"blah3"},
{memberId : 6, parentId:1, amount:600, otherInfo:"blah4"},
{memberId : 9, parentId:4, amount:700, otherInfo:"blah5"},
{memberId : 12, parentId:2, amount:800, otherInfo:"blah6"},
{memberId : 5, parentId:2, amount:900, otherInfo:"blah7"},
{memberId : 13, parentId:2, amount:0, otherInfo:"blah8"},
{memberId : 14, parentId:2, amount:800, otherInfo:"blah9"},
{memberId : 55, parentId:2, amount:250, otherInfo:"blah10"},
{memberId : 56, parentId:3, amount:10, otherInfo:"blah11"},
{memberId : 57, parentId:3, amount:990, otherInfo:"blah12"},
{memberId : 58, parentId:3, amount:400, otherInfo:"blah13"},
{memberId : 59, parentId:6, amount:123, otherInfo:"blah14"},
{memberId : 54, parentId:6, amount:321, otherInfo:"blah15"},
{memberId : 53, parentId:56, amount:10000, otherInfo:"blah7"},
{memberId : 52, parentId:2, amount:47, otherInfo:"blah17"},
{memberId : 51, parentId:6, amount:534, otherInfo:"blah18"},
{memberId : 50, parentId:9, amount:55943, otherInfo:"blah19"},
{memberId : 22, parentId:9, amount:2, otherInfo:"blah27"},
{memberId : 33, parentId:12, amount:-10, otherInfo:"blah677"}
];
var testImgSrc = "http://0.gravatar.com/avatar/06005cd2700c136d09e71838645d36ff?s=69&d=wavatar";
(function heya( parentId ){
// This is slow and iterates over each object everytime.
// Removing each item from the array before re-iterating
// may be faster for large datasets.
for(var i = 0; i < members.length; i++){
var member = members[i];
if(member.parentId === parentId){
var parent = parentId ? $("#containerFor" + parentId) : $("#mainContainer"),
memberId = member.memberId,
metaInfo = "<img src='"+testImgSrc+"'/>" + member.otherInfo + " ($" + member.amount + ")";
parent.append("<div class='container' id='containerFor" + memberId + "'><div class='member'>" + memberId + "<div class='metaInfo'>" + metaInfo + "</div></div></div>");
heya(memberId);
}
}
}( null ));
// makes it pretty:
// recursivley resizes all children to fit within the parent.
var pretty = function(){
var self = $(this),
children = self.children(".container"),
// subtract 4% for margin/padding/borders.
width = (100/children.length) - 2;
children
.css("width", width + "%")
.each(pretty);
};
$("#mainContainer").each(pretty);
It is by no means an optimal solution. The first loop will become a nightmare for performance the more data you begin loading.
这绝不是最佳解决方案。开始加载的数据越多，第一个循环将成为性能的噩梦。
回答by UltraInstinct
I am unsure whether this code will run or not, I a just typing in here, without testing. And I hope this is what you are looking for. (BTW, I have conventional style for-loops for array-search. Its been long since I last used javascript. So kinda I need to refer to w3schools for the array functions. :-P)
我不确定这段代码是否会运行，我只是在这里输入，没有测试。我希望这就是你正在寻找的。（顺便说一句，我有用于数组搜索的传统样式 for 循环。自从我上次使用 javascript 已经很久了。所以我需要参考 w3schools 来获取数组函数。:-P）
var str = [
{memberID : 1, parentId:null, amount:200, otherInfo:"blah"},
{memberID : 2, parentId:1, amount:300, otherInfo:"blah1"},
{memberID : 3, parentId:1, amount:400, otherInfo:"blah2"},
{memberID : 4, parentId:3, amount:500, otherInfo:"blah3"}
];
(function fromArray(arr){
var getElemByParent = function(parent){
var elems = [];
for (var i=0; i<arr.length; i++){
if (arr[i].parentId == parent)
elems.push(arr[i]);
}
return elems;
}
var finalObj;
var enumFunction = function(node){
node.siblings = getElemByParent(node.memberID);
for (var i=0;i<node.siblings.length; i++)
enumFunction(node.siblings[i]);
}
finalObj = getElemByParent(null);
enumFunction(finalObj);
console.log(finalObj);
return finalObj;
})(str);
PS: You will have to take care of many other situations as well. Like, what if the data is not consistent etc. I have avoided most(rather, all) of them in the code above.
PS：您还必须处理许多其他情况。就像，如果数据不一致等怎么办。我在上面的代码中避免了大部分（而是全部）。
