[英]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
現在我想要像這樣構建樹 : 只使用JS。 上面的數據可以用JSON / XML / CSV /格式化文本傳遞我怎樣才能在JS中生成這樣的動態樹? 請不要建議PHP / .NET解決方案。 我更喜歡JQuery。
而且,在這里你去:
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);
它絕不是最佳解決方案。 第一個循環將成為性能的噩夢,您開始加載的數據越多。
我不確定這段代碼是否會運行,我只是在這里輸入,而不進行測試。 我希望這就是你要找的東西。 (順便說一句,我有陣列搜索的常規樣式for-loops。自從我上次使用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:您還必須處理許多其他情況。 比如,如果數據不一致等怎么辦?我已經避免了上面代碼中的大多數(而不是全部)數據。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.