如何在JavaScript中为XML / XML数据生成一个MLM（多层次营销）树 [英] How to generate a tree for MLM ( Multi-Level Marketing ) in JavaScript for either JSON / XML data

问题描述

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

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

现在我要建立
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： 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，parentI d：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：金额：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; 
（函数heya（parentId）{
 //这是很慢的，每次迭代遍历每个对象
 //在重新迭代之前从数组中删除每个项目
 //可能对于大数据集，对于（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））; 
 
 //使它漂亮：
 // recursivley调整所有孩子的大小，使其适合父项。 
 var pretty = function（）{
 var self = $（this），
 children = self.children（。container），
 //减去4％ /填充/边界。 
 width =（100 / children.length） -  2; 
 children 
 .css（width，width +％）
 .each（pretty）; 
 
}; 
 $（＃mainContainer）。each（pretty）; 
  

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

I have some data like this : (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 Tree like 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.

解决方案

And, here you go:

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.

这篇关于如何在JavaScript中为XML / XML数据生成一个MLM（多层次营销）树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！