Wie generieren Sie einen Baum für MLM ( Multi-Level-Marketing ) in JavaScript entweder JSON / XML-Daten

Ich habe einige Daten wie diese :
(BEI sql sERVER)

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

Nun will ich bauen Baum wie diese :
Wie generieren Sie einen Baum für MLM ( Multi-Level-Marketing ) in JavaScript entweder JSON /XML-Daten
Nur mit JS.
Oben können Daten im JSON /XML /CSV /Text Formatiert
Wie kann ich das erzeugen solcher dynamischen Baum in JS nur ?
Bitte nicht schlagen PHP /.NET-Lösungen.
Ich würde lieber eine JQuery.

Können Sie bitte etwas code. Wie wird die empfangenen Daten auf der client-Seite?

InformationsquelleAutor Pratik | 2010-12-18

  1. 11

    Und, hier gehen Sie:

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

    Möchten Sie Stil Sie es selbst, natürlich. Aber das sollte Ihnen den Einstieg:

    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);

    Ist es keineswegs eine optimale Lösung. Die erste Schleife wird zu einem Albtraum für die performance, desto mehr Daten Sie beginnen laden.

    Vielen Dank für die Antwort.Aber nicht wir haben eine Baum-Struktur.yours jsfiddle link zeigt nur die lineare Struktur.Ich bin auf der Suche nach Baum-Struktur.Ich freue mich auf Ihre Antwort bald.
    Es funktioniert gut in FireFox 3.6, NICHT aber in IE 8.0
    Ach ja, richtig. Ich habe nur getestet im Chrome dev channel. Tut mir Leid, dass. IE8 hat wahrscheinlich ein problem mit den Margen oder Schwimmer oder so etwas.
    ach yah, und stellen Sie sicher, dass Sie don ' T haben keine zirkulären Referenzen, z.B. var members = [{memberId:1, parentId:2},{memberId:2, parentId:1}]; wie Stell ich den code, den ich gab, die Sie genießen werden, sperren Sie Ihren browser für eine Weile. 🙂
    Können Sie mir bitte sagen . Wie kann ich die Daten von PHP zu javascript so???? ?

    InformationsquelleAutor David Murdoch

  2. 1

    Ich bin nicht sicher, ob dieser code ausgeführt wird oder nicht, ist mir nur ein Tippfehler hier, ohne zu testen. Und ich hoffe das ist was du suchst. (BTW, ich habe den konventionellen Stil for-Schleifen-array-Suche. Seine schon lange, seit ich das Letzte mal verwendet javascript. So ein bisschen muss ich beziehen sich auf w3schools für die array-Funktionen. :-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: Sie kümmern sich um viele andere Situationen auch. Wie, was, wenn die Daten nicht konsistent, etc. Ich habe vermieden die meisten(nicht alle) von Ihnen im obigen code.

    InformationsquelleAutor UltraInstinct

Schreibe einen Kommentar