2016-09-12 5 views
1

Как использовать следующие свойства данных для рендеринга древовидного изображения с помощью вложенных неупорядоченных списков (<ul>)?Как сделать рекурсивную функцию для дерева?

// parentId value is always 0 for root nodes, otherwise this value corresponds to the id of its parent 
// sequence represents the order of the element in the branch 
// level represents the tree level of the element, root nodes will have a level of 1 
var data = [ 
    { id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 }, 
    { id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 }, 
    { id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 }, 
    { id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 }, 
    { id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 }, 
    { id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 } 
]; 

Результат должен выглядеть следующим образом:

A 
    Alan 
    Abe 
B 
    Bir 
    Boromir 

Я попытался с петлями для но вскоре я повторял код, чтобы получить дочерние узлы, и я не смог реорганизовать его в рекурсивная функция.

Вот CodePen с данными: http://codepen.io/nunoarruda/pen/KgVPmv

+0

Вы еще искали «Javascript дерева отображения» на SO? Существуют некоторые существующие решения. Вы не отправили свою попытку кодирования (MCVE), которая может повлиять на скорость вашего ответа. – Prune

+0

@nunoarruda ... рекурсивный подход не требуется. Взгляните на мой ответ ниже. –

ответ

0

Ответит следующие части вопроса Ора по ...

Как использовать следующие свойства данных для отображения в виде дерева с помощью вложенного неупорядоченного списки()?

С данной структурой данных нет необходимости в рекурсивном решении. Сочетание sort ИНГ предоставленного списка данных, а затем преобразование его с помощью определенного reduce обратного вызова уже делает работу ...

var 
    dataList = [ 
    { id: 'K66', level: 1, name: 'B', parentId: '0', sequence: 2 }, 
    { id: 'KK2', level: 2, name: 'Alan', parentId: 'K65', sequence: 1 }, 
    { id: 'K65', level: 1, name: 'A', parentId: '0', sequence: 1 }, 
    { id: 'KK77', level: 3, name: 'Boromir', parentId: 'KK22', sequence: 1 }, 
    { id: 'KK22', level: 2, name: 'Bir', parentId: 'K66', sequence: 1 }, 
    { id: 'KK92', level: 2, name: 'Abe', parentId: 'K65', sequence: 2 } 
    ], 

    htmlListFragment = dataList.sort(function (a, b) { 

    // sort by `level` or, if both are equal (sub)sort by `sequence` 
    return (a.level - b.level) || (a.sequence - b.sequence); 

    }).reduce(function (collector, item) { 
    var 
     registry = collector.registry, 
     fragment = collector.htmlListFragment, 

     parentId = item.parentId, 
     id  = item.id, 
     name  = item.name, 

     member = registry[id]; 

    if (!member) { 

     member = registry[id] = document.createElement("li"); 
     member.id = id; 
     member.appendChild(document.createTextNode(name)); 
     member.appendChild(document.createElement("ul")); 

     if ((item.level === 1) && (item.parentId === "0")) { 

     fragment.appendChild(member); 
     } else { 
     registry[parentId].getElementsByTagName("ul")[0].appendChild(member); 
     } 
    } 

    return collector; 

    }, { 

    registry  : {}, 
    htmlListFragment: document.createElement("ul") 

    }).htmlListFragment; 


console.log("htmlListFragment : ", htmlListFragment) 

 Смежные вопросы

  • Нет связанных вопросов^_^