如何在 JavaScript 中为 JSON / XML 数据生成 MLM（多层次营销）树

Posted 2023-03-31

【中文标题】如何在 JavaScript 中为 JSON / XML 数据生成 MLM（多层次营销）树

【英文标题】：How to generate a tree for MLM ( Multi-Level Marketing ) in JavaScript for either JSON / XML data

【发布时间】：2010-12-18 03:24:26

【问题描述】：

我有一些这样的数据： （在 sql 服务器）

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

现在我想像这样构建Tree： 只使用 JS。 以上数据可以以 JSON / XML / CSV / Formatted Text 的形式传递 我怎样才能只在 JS 中生成这样的动态树？ 请不要建议 php / .NET 解决方案。 我更喜欢 JQuery。

【问题讨论】：

能否请您发布一些代码。客户端如何接收数据？

【参考方案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 = "<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);

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

【讨论】：

感谢您的回答。但是我们不能在其中包含树结构。您的 jsfiddle 链接仅显示线性结构。我正在寻找树结构。期待您的回复。

哦，对了。我只在 Chrome 的开发频道中测试过。对于那个很抱歉。 IE8 可能有边距或浮点数之类的问题。

哦，是的，确保你没有任何循环引用，例如，var members = [memberId:1, parentId:2,memberId:2, parentId:1];，因为我想我给你的代码会喜欢锁定你的浏览器一段时间。 :-)

你能告诉我吗。我怎样才能像这样将数据从 PHP 发送到 javascript ？ ?

【参考方案2】：

我不确定这段代码是否会运行，我只是在这里输入，没有测试。我希望这就是你要找的。 （顺便说一句，我有用于数组搜索的传统风格的 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：您还必须处理许多其他情况。比如，如果数据不一致等怎么办。我在上面的代码中避免了大部分（而不是全部）。