Генерация дерева Nested Sets

572

18 августа 2017, 00:01

Реализовать функцию drawNestedSetsTree(data, node), которая принимает на вход два аргумента:

data - массив из 0 или более узлов, каждый элемент которого содержит поля title (имя узла), left (левая граница) и right (правая граница). Формат хранения - Nested Sets node - DOM-узел (можете считать что это будет div), в который надо вывести итоговую структуру в виде дерева ul и li Функция drawNestedSetsTree выводит в переданный DOM-узел визуализацию дерева, которое лежит в data.

Входной массив data и результат работы функции имеют вид:

[ 
  { 
    title: "Одежда", 
    left: 1, 
    right: 22 
  }, 
  { 
    title: "Мужская", 
    left: 2, 
    right: 9 
  }, 
  { 
    title: "Женская", 
    left: 10, 
    right: 21 
  }, 
  { 
    title: "Костюмы", 
    left: 3, 
    right: 8 
  }, 
  { 
    title: "Платья", 
    left: 11, 
    right: 16 
  }, 
  { 
    title: "Юбки", 
    left: 17, 
    right: 18 
  }, 
  { 
    title: "Блузы", 
    left: 19, 
    right: 20 
  }, 
  { 
    title: "Брюки", 
    left: 4, 
    right: 5 
  }, 
  { 
    title: "Жакеты", 
    left: 6, 
    right: 7 
  }, 
  { 
    title: "Вечерние", 
    left: 12, 
    right: 13 
  }, 
  { 
    title: "Летние", 
    left: 14, 
    right: 15 
  } 
];

<ul> 
  <li>Одежда 
    <ul> 
      <li>Мужская 
        <ul> 
          <li>Костюмы 
            <ul> 
              <li>Брюки</li> 
              <li>Жакеты</li> 
            </ul> 
          </li> 
        </ul> 
      </li> 
      <li>Женская 
        <ul> 
          <li>Платья 
            <ul> 
              <li>Вечерние</li> 
              <li>Летние</li> 
            </ul> 
          </li> 
          <li>Юбки</li> 
          <li>Блузы</li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
</ul>

Интересует алгоритм решения таких задач.

Answer 1

тоже пытаешься сделать тестовое задание?)) Нашел более подходящее для нас решение :

function drawNestedSetsTree(data, node) {
  const ul = document.createElement('ul');
  data = data.sort((first, second) => {
    if (first.left > second.left) return 1;
    if (first.left < second.left) return -1;
  });
  let counts = data.length;
  console.log('counts',counts);
  for (let i = 0; i < counts; i++ ) {
    let item = data[i];
    console.log('item', item.title);
    let li = document.createElement('li');
    li.textContent = item.title;
    if ((item.right - item.left) == 1) {
      ul.appendChild(li);
    } else {
      data.splice(0, 1);
      let children = data.filter(x => x.left < item.right);
      data.splice(0, children.length);
      counts = counts - (children.length + 1);
      console.log('i', i);
      if (children.length > 0) {
        child = drawNestedSetsTree(children, li);
      }
      ul.appendChild(child);
    }
  };
  node.appendChild(ul);
  return node;
}
if (typeof module !== 'undefined') {
  module.exports = drawNestedSetsTree;
}

вот еще хороший материал, для более глубокого изучения http://www.getinfo.ru/article610.html

удачи)

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как закрыть все popover bootstrap

Нажимаем первую картинкувторая не закрылась

291

javascript

Адаптивная ширина видео

Сайт на bootstrap, на сайте много видео с разной шириной, при просмотре на мобильных вылазит за границу экрана, ставлю width:100%, на мобильном ОК, а на ПК все...

348

javascript

Как вытащить( ссылку )точнее селектор из location.href средствами рhpQuery?

Как вытащить ссылку, а точнее селектор из locationhref средствами рhpQuery?

266

javascript

Как сделать так чтобы сайдбар был открытым при клике?

Как сделать так чтобы при клике на каждый брэнд он оставался открытым с выпадающим списком категорий внутриК примеру кликнул, и остается...

241