设置与 jsTree 一起使用的分层数组

Question

我正在尝试创建将存储在数组中的分层数据转换为以下格式的函数：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        

      }      

    });   

    

  });

Answer 1

尝试这样做。var array = [&nbsp; &nbsp; {"id":"1", "idType": "1", "name": "FCB", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": ""},&nbsp; &nbsp; {"id":"2", "idType": "2", "name": "Football", "Members": [{"name": "Pique"}], "idParent": "1"},&nbsp; &nbsp; {"id":"3", "idType": "2", "name": "Basketball", "Members": [{"name": "Pique"}], "idParent": "1"},&nbsp; &nbsp; {"id":"4", "idType": "3", "name": "UEFA 14", "Members": [{"name": "Test"}], "idParent": "2"},&nbsp; &nbsp; {"id":"5", "idType": "3", "name": "UEFA 15", "Members": [{"name": "Carlos"}], "idParent": "2"},&nbsp; &nbsp; {"id":"6", "idType": "3", "name": "NBA 15", "Members": [], "idParent": "3"},&nbsp; &nbsp; {"id":"7", "idType": "4", "name": "Team 1", "Members": [{"name": "Lionel"},{"name": "Pique"}], "idParent": "4"},&nbsp; &nbsp; {"id":"8", "idType": "4", "name": "Team 2", "Members": [{"name": "Lionel"}], "idParent": "4"},&nbsp; &nbsp; ]function create_jstree(array){&nbsp; var resultArray = [];&nbsp; array.forEach((element) => {&nbsp; &nbsp; &nbsp; let object1;&nbsp; &nbsp; &nbsp; if(element.idParent!=""){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; object1 = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text": element.name,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id":element.id,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "children": createMembers(element)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let index=resultArray.findIndex( (resElement)=>resElement.id==element.idParent);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( index == -1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; findParentAndPushChild(element,object1,resultArray)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resultArray[index].children.push(object1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; object1 = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text": element.name,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id":element.id,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "children": createMembers(element)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resultArray.push(object1);&nbsp; &nbsp; &nbsp; }&nbsp; });&nbsp; return resultArray;}function findParentAndPushChild(element,object,resArray){&nbsp; resArray.forEach( (child)=> {&nbsp; &nbsp; if(child.id == element.idParent){&nbsp; &nbsp; &nbsp; child.children.push(object);&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; else if(child.children.length!=0){&nbsp; &nbsp; &nbsp; findParentAndPushChild(element,object,child.children);&nbsp; &nbsp; }&nbsp; });&nbsp;&nbsp;}function createMembers(element) {&nbsp; let tempArr=[];&nbsp;&nbsp;&nbsp; if (element.Members && element.Members.length!=0) {&nbsp; &nbsp; &nbsp; &nbsp; tempArr.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text": "Members",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "children": element.Members.map((member) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text": member.name,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "children": []&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; return tempArr;}$(function() {&nbsp; $("#jstree_try").jstree({&nbsp; &nbsp; 'core' : {&nbsp; &nbsp; &nbsp; 'themes': {&nbsp; &nbsp; &nbsp; &nbsp; 'responsive': true&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; 'data' : create_jstree(array)&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;&nbsp;});<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>