如何使用JavaScript为JSON / XML数据生成MLM（多级营销）树

我有一些这样的数据：（AT sql sERVER）

MemberID,ParemtID,Amt,OtherInfo 1, NULL, 200,dfdsf 2, 1, 300,DFDF 3, 1, 400,DFS 4, 3, 75,NULL 

现在我想要像这样构建树 ： 只使用JS。 以上数据可以用JSON / XML / CSV /格式化文本传递如何只在JS中生成这样的动态树？ 请不要建议PHP / .NET解决方案。 我更喜欢JQuery。

Answer 1

而且，你走了：

http://jsfiddle.net/vVmcC/ http://jsfiddle.net/vVmcC/4/

显然，你会想要自己设计它。 但这应该让你开始：

 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 = "" + member.otherInfo + " ($" + member.amount + ")"; parent.append("
" + memberId + "
" + metaInfo + "
"); 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); 

它绝不是最佳解决方案。 第一个循环将成为性能的噩梦，您开始加载的数据越多。

Answer 2

我不确定这段代码是否会运行，我只是在这里输入，而不进行测试。 我希望这就是你要找的东西。 （顺便说一句，我有传统的for-loops for array-search。自从我上次使用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 

PS：您还必须处理许多其他情况。 比如，如果数据不一致等怎么办？我在上面的代码中避免了大多数（相当于全部）数据。