基于 parent_id 创建树视图

Question

我有一个地图列表，我正在努力构建一棵 html 树，单击一个元素后，它会显示其子项列表。做这样的事情最好的方法是什么？

例如：我们有一个地图列表： [%Person{name: "name1", id: 1, parent_id: nil}, %Person{name: "name2", id: 2, parent_id: 1},%Person{name: "name3", id: 3, parent_id: 2}]

我想得到这样的东西：

name1 ↓
       name2 ↓
              name 3

我将不胜感激！

Answer 1

这可能是一个棘手的问题，因为如果你需要遍历到树的最后一片叶子，你必须多次遍历列表（我会让别人告诉你确切的 O(n)）。

但是，如果您只需要像您的问题暗示的那样显示即时 children，那么 Enum.filter/2 就是您的朋友。您可以编写一个函数来接受人员列表和 parent 的 ID，您希望查看其 children。

例如，如果您希望在根目录（parent_id = nil 处）找到所有人：

iex> parent_id = nil 
nil
iex> Enum.filter(people, fn %{parent_id: id} -> id == parent_id end)
[%{id: 1, name: "name1", parent_id: nil}]

基于 parent_id 创建树视图

creating a tree view based on parent_id

html

tree

phoenix

elixir