如何在 JavaScript 中为 JSON/XML 数据生成 MLM(多级营销)树 [英] How to generate a tree for MLM ( Multi-Level Marketing ) in JavaScript for either JSON / XML data
问题描述
我有一些这样的数据:(在 sql 服务器上)
MemberID,ParemtID,Amt,OtherInfo1、NULL、200、dfdsf2, 1, 300,DFDF3、1、400、DFS4, 3, 75, NULL
现在我想像这样构建http://jsfiddle.net/vVmcC/4/
很明显,你会想要自己设计风格.但这应该会让你开始:
var 成员 = [{memberId : 1, parentId:null, 金额:200, otherInfo:"blah"},{memberId : 2, parentId:1, 金额:300, otherInfo:"blah1"},{memberId : 3, parentId:1, 金额:400, otherInfo:"blah2"},{memberId : 4, parentId:3, 金额:500, otherInfo:"blah3"},{memberId : 6, parentId:1, 金额:600, otherInfo:"blah4"},{memberId : 9, parentId:4, 金额:700, otherInfo:"blah5"},{memberId : 12, parentId:2, 金额:800, otherInfo:"blah6"},{memberId : 5, parentId:2, 金额:900, otherInfo:"blah7"},{memberId : 13, parentId:2, 金额:0, otherInfo:"blah8"},{memberId : 14, parentId:2, 金额:800, otherInfo:"blah9"},{memberId : 55, parentId:2, 金额:250, otherInfo:"blah10"},{memberId : 56, parentId:3, 金额:10, otherInfo:"blah11"},{memberId : 57, parentId:3, 金额:990, otherInfo:"blah12"},{memberId : 58, parentId:3, 金额:400, otherInfo:"blah13"},{memberId : 59, parentId:6, 金额:123, otherInfo:"blah14"},{memberId : 54, parentId:6, 金额:321, otherInfo:"blah15"},{memberId : 53, parentId:56, 金额:10000, otherInfo:"blah7"},{memberId : 52, parentId:2, 金额:47, otherInfo:"blah17"},{memberId : 51, parentId:6, 金额:534, otherInfo:"blah18"},{memberId : 50, parentId:9, 金额:55943, otherInfo:"blah19"},{memberId : 22, parentId:9, 金额:2, otherInfo:"blah27"},{memberId:33,parentId:12,金额:-10,otherInfo:blah677"}];var testImgSrc = "http://0.gravatar.com/avatar/06005cd2700c136d09e71838645d36ff?s=69&d=wavatar";(功能嘿(父Id){//这很慢并且每次都迭代每个对象.//在重新迭代之前从数组中删除每个项目//对于大型数据集可能更快.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'>" + 元信息 + "</div></div></div>");heya(memberId);}}}( 空值 ));//让它漂亮://recursivley 调整所有子项的大小以适应父项.var 漂亮 = 函数(){var self = $(this),children = self.children(".container"),//减去 4% 的边距/填充/边框.宽度 = (100/children.length) - 2;孩子们.css("宽度", 宽度 + "%").each(漂亮);};$("#mainContainer").each(漂亮);
这绝不是最佳解决方案.开始加载的数据越多,第一个循环将成为性能的噩梦.
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 中为 JSON/XML 数据生成 MLM(多级营销)树的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!