Javascript массив из квартиры в дерево - PullRequest
Новая
       45

Javascript массив из квартиры в дерево

0 голосов
/ 05 марта 2020

все,

У меня есть техническое задание от одной компании. Поскольку я только начинаю, задача для меня трудная. Плоский массив: 

[
      { id: '1', name: 'name 1', parentId: null },
      { id: '2', name: 'name 2', parentId: null },
      { id: '2_1', name: 'name 2_1', parentId: '2' },
      { id: '2_2', name: 'name 2_2', parentId: '2' },
      { id: '3', name: 'name 3', parentId: null },
      { id: '4', name: 'name 4', parentId: null },
      { id: '5', name: 'name 5', parentId: null },
      { id: '6', name: 'name 6', parentId: null },
      { id: '7', name: 'name 7', parentId: null },
      { id: '1_1', name: 'name 1_1', parentId: '1' },
      { id: '1_2', name: 'name 1_2', parentId: '1' },
      { id: '1_3', name: 'name 1_3', parentId: '1' },
      { id: '1_4', name: 'name 1_4', parentId: '1' },
      { id: '1_5', name: 'name 1_5', parentId: '1' },
      { id: '2_1_1', name: 'name 2_1_1', parentId: '2_1' },
      { id: '2_1_2', name: 'name 2_1_2', parentId: '2_1' },
      { id: '2_1_3', name: 'name 2_1_3', parentId: '2_1' },
      { id: '2_1_4', name: 'name 2_1_4', parentId: '2_1' },
      { id: '2_1_5', name: 'name 2_1_5', parentId: '2_1' },
].

Мне нужно сделать его в виде дерева и включить его в список ввода, чтобы иметь возможность открывать и закрывать дочерние списки. Пожалуйста, помогите

1 Ответ

0 голосов
/ 05 марта 2020

При создании моего решения я предполагал, что вы хотите подобную аккордеону структуру из ваших данных, которую можно открывать или закрывать в зависимости от того, есть у них дети или нет. Вот фрагмент кода для обработки добавления ссылки. 

arr.forEach(a => {
  const div = document.createElement("div")
  if (a.parentId === null) {
    div.classList.add("parent")
    div.setAttribute("id", `id${a.id}`)
    div.innerText = a.name
    tree.appendChild(div)
  }
  else {
    const parent = document.getElementById(`id${a.parentId}`)
    if (!parent.classList.contains("parent")) {
      parent.classList.add("parent")
    }
    console.log(`${a.id} `, parent)
    let childContainer = null
    if (parent.childElementCount === 0) {
      childContainer =  document.createElement("div")
      childContainer.classList.add("childContainer")
      parent.appendChild(childContainer)
      childContainer.classList.add("hidden")
    }
    else {
      childContainer = document.querySelector(`#id${a.parentId} .childContainer`)
    }
    div.classList.add("child")
    div.setAttribute("id", `id${a.id}`)
    div.innerText = a.name
    childContainer.appendChild(div)
  }
})

Полное решение: Ссылка Codepen

...