我正在嘗試創建將存儲在數組中的分層數據轉換為以下格式的函數：id，name，idType，Members，idParent到text，Children。數組的數據：[{"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"}]我需要做的是在子鍵內部創建兩個組：第一個基于會員密鑰。如果父級有成員創建此組，則不執行任何操作。第二個基于孩子的 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 } }); });
1 回答
犯罪嫌疑人X
TA貢獻2080條經驗 獲得超4個贊
嘗試這樣做。
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>
- 1 回答
- 0 關注
- 93 瀏覽
添加回答
舉報
0/150
提交
取消