我正在尝试创建函数来转换存储在数组中的分层数据,格式如下:id、name、idType、>成员,idParent到文本, child 。
数组的数据:
[
{"id":"1", "idType": "1", "name": "FCB", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": ""},
{"id":"2", "idType": "2", "name": "Football", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"3", "idType": "2", "name": "Basketball", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"4", "idType": "3", "name": "UEFA 14", "Members": [{"name": "Test"}], "idParent": "2"},
{"id":"5", "idType": "3", "name": "UEFA 15", "Members": [{"name": "Carlos"}], "idParent": "2"},
{"id":"6", "idType": "3", "name": "NBA 15", "Members": [], "idParent": "3"}
]
我需要做的是在子键内部创建两个组:
第一个基于成员 key 。如果家长有成员创建此群组,则不执行任何操作。
第二个基于子项的 idType。
树将如下所示:
var array_expected =
[{ "text" : "FCB", "children": [
{ "text" : "Members", "children":[{"text":"Lionel"}, {"text":"Pique"}]},
{"text" : "Sports", "children": [
{"text": "Football", "children": [{"text":"Members", "children":[{"text": "Pique"}]},{"text":"Categories", "children":[{"text": "UEFA 14", "children": [{"text": "Teams", "children": [{"text": "Team 1", "children": [{"text": "Members","children": [{"text": "Puyol"}, {"text": "Iniesta"}]}]}, {"text": "Team 2"}]}]}, {"text": "UEFA 15", "children":[{"text":"Members", "children": [{"text": "Xavi"}]}]}]}]},
{"text": "Basketball", "children":[{"text":"Members", "children":[{"text": "Pique"}]},{"text":"Categories", "children":[{"text": "NBA 14"}, {"text": "NBA 15"}]}]}]},
] }
]
$(function() {
$("#expected_jstree").jstree({
'core' : {
'themes': {
'responsive': true
},
'data' : array_expected
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>
<div id="expected_jstree"></div>
我已经制作了此功能,但我不知道如何按类型对子项进行分组,以及如果该元素没有子项,如何添加组成员(例如:UEFA 15有成员,但未显示)。
var array = [
{"id":"1", "idType": "1", "name": "FCB", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": ""},
{"id":"2", "idType": "2", "name": "Football", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"3", "idType": "2", "name": "Basketball", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"4", "idType": "3", "name": "UEFA 14", "Members": [{"name": "Test"}], "idParent": "2"},
{"id":"5", "idType": "3", "name": "UEFA 15", "Members": [{"name": "Carlos"}], "idParent": "2"},
{"id":"6", "idType": "3", "name": "NBA 15", "Members": [], "idParent": "3"},
{"id":"7", "idType": "4", "name": "Team 1", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": "4"},
{"id":"8", "idType": "4", "name": "Team 2", "Members": [{"name": "Lionel"}], "idParent": "4"},
]
function create_jstree(array){
var parent = [], children = {};
for (var i = 0, len = array.length; i < len; ++i) {
var item = array[i],
idParent = item.idParent,
target = !idParent ? parent : (children[idParent] || (children[idParent] = []));
target.push({ text: item.name, id: item.id, idParent: item.idParent, Members: item.Members, idType: item.idType});
}
var find_child = function(parent) {
if(children[parent.id]) {
if(parent.Members.length >= 1){
var members = [];
for(var i = 0; i < parent.Members.length; i++){
members.push({text: parent.Members[i].name})
}
children[parent.id].splice(0, 0, {text: "Members", children: members});
}
parent.children = children[parent.id];
for (var i = 0, len = parent.children.length; i < len; ++i) {
find_child(parent.children[i]);
}
}
};
for (var y = 0, leng = parent.length; y < leng; ++y) {
find_child(parent[y]);
}
return parent;
}
$(function() {
$("#jstree_try").jstree({
'core' : {
'themes': {
'responsive': true
},
'data' : create_jstree(array)
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>
<div id="jstree_try"></div>
最佳答案
尝试这样做。
var array = [
{"id":"1", "idType": "1", "name": "FCB", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": ""},
{"id":"2", "idType": "2", "name": "Football", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"3", "idType": "2", "name": "Basketball", "Members": [{"name": "Pique"}], "idParent": "1"},
{"id":"4", "idType": "3", "name": "UEFA 14", "Members": [{"name": "Test"}], "idParent": "2"},
{"id":"5", "idType": "3", "name": "UEFA 15", "Members": [{"name": "Carlos"}], "idParent": "2"},
{"id":"6", "idType": "3", "name": "NBA 15", "Members": [], "idParent": "3"},
{"id":"7", "idType": "4", "name": "Team 1", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": "4"},
{"id":"8", "idType": "4", "name": "Team 2", "Members": [{"name": "Lionel"}], "idParent": "4"},
]
function create_jstree(array){
var resultArray = [];
array.forEach((element) => {
let object1;
if(element.idParent!=""){
object1 = {
"text": element.name,
"id":element.id,
"children": createMembers(element)
}
let index=resultArray.findIndex( (resElement)=>resElement.id==element.idParent);
if( index == -1){
findParentAndPushChild(element,object1,resultArray)
}
else{
resultArray[index].children.push(object1);
}
}
else{
object1 = {
"text": element.name,
"id":element.id,
"children": createMembers(element)
}
resultArray.push(object1);
}
});
return resultArray;
}
function findParentAndPushChild(element,object,resArray){
resArray.forEach( (child)=> {
if(child.id == element.idParent){
child.children.push(object);
return;
}
else if(child.children.length!=0){
findParentAndPushChild(element,object,child.children);
}
});
}
function createMembers(element) {
let tempArr=[];
if (element.Members && element.Members.length!=0) {
tempArr.push({
"text": "Members",
"children": element.Members.map((member) => {
return {
"text": member.name,
"children": []
}
})
})
}
return tempArr;
}
$(function() {
$("#jstree_try").jstree({
'core' : {
'themes': {
'responsive': true
},
'data' : create_jstree(array)
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>
<div id="jstree_try"></div>
关于javascript - 设置与 jsTree 一起使用的分层数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60725537/