主页 / 问题 / 706973
Accepted
pepel_xD
Asked:2020-08-17 14:07:09 +0800 CST2020-08-17 14:07:09 +0800 CST

嵌套集的树生成

  • 772

实现一个drawNestedSetsTree(data, node)将两个参数作为输入的函数：

  • data- 一个或多个节点的数组0，其中每个元素都包含字段

    • title（主机名），

    • left（左边框）和

    • right（右边框）。

    存储格式 - 嵌套集

  • node- DOM节点（你可以认为它会是div），你需要在其中以树的形式展示最终的结构ul和li

该函数drawNestedSetsTree()将位于数据中的树的可视化输出到传递的 DOM 节点。

输入数组数据和函数结果如下所示： 

[
  {
    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>

对解决此类问题的算法感兴趣。

javascript

2 个回答

  1. Best Answer

    Nested Sets - 一种存储目录树的格式，每个目录树包含左右一对列，存储所有嵌套元素的范围，例如，9个元素的树的根会有一个左值'' 1'' 和正确的值 ''18'' 。

    链接到维基。

    这是一个示例，说明如何根据您的任务使用 NS 数据在 JS 中呈现嵌套的 HTML 列表：

    /**
  * Функция принимает 2 значения:
  * @param data - массив Nested Sets
  * @param node - DOM элемент
  */
function drawNestedSetsTree(data, node) {
  node.innerHTML = ''; // Очищаем от дочерних элементов

  if (data.length) { // Проверяем есть ли данные
    var ul = document.createElement('ul'); // Создаём контейнер <ul>
    var tree = fetchChildElement(ul); // Создаём дерево
    node.appendChild(tree); // Добавляем дерево в наш node элемент
  }

  /**
    * Функция создаёт и возвращает готовое HTML дерево:
    * @param container - DOM элемент, контейнер для дерева
    * @param left - минимальное значение left (не обязательный)
    * @param right - максимальноее значение right (не обязательный)
    */
  function fetchChildElement(container, left, right) {
    data.filter(filterItems); // Перебираем массив данных
    return container;

    function filterItems(item) {
      if (item.left === (left || 1)) {
        var element = document.createElement('li');
        element.innerHTML = item.title;

        // Здесь мы проверяем есть ли у данного элемента
        // вложенные элементы. Если такие имеються, то для
        // них вызываем функцию заново.
        if (item.left + 1 < item.right) {
          var childContainer = document.createElement('ul');
          var child = fetchChildElement(childContainer, item.left + 1, item.right - 1);
          element.appendChild(child);
        }

        // Добавляем в контейнер новый элемент
        container.appendChild(element);

        // Здесь мы проверяем есть ли последующие элементы
        // и вызываем для них функцию.
        if (right && item.right < right) {
          fetchChildElement(container, item.right + 1, right);
        }
      }
    }
  }
}

    这里的工作示例

    • 3

  2. 您是否也在尝试进行测试任务？））我找到了更适合我们的解决方案：

    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;
}

    祝你好运）

    • -1

相关问题