Question

我是斯卡拉的新手。我正在尝试构建像

这样的导航树

父
- Child1
- CHILD2
- Child3
- Child4

我有一个模型类。

case class Field(id:Long, name:String, icon:String, parentid:Long)

object Field {
  def all():List[Field] = {
    List(
      Field(1,"Parent1","1", 0),
      Field(2,"Child1","2",1),
      Field(3,"Child2","3",1),
      Field(4,"Child3","4",1),
      Field(5,"Child4","5",1)
    )
  }
}

在我看来，我有一个渲染代码：

@fields.groupBy(_.parentid).map {  case ( parentid, tasks) =>
<ul>
    <li>@parentid</li>
    <ul>
        @tasks.map { task =>
            <li>@task.name</li>
        }
    </ul>
</ul>
}

但不幸的是输出是：

1
- Child1
- CHILD2
- Child3
- Child4
0
- Parent1

如何构建导航菜单，其中模型具有子/父关系？我希望你理解我的问题，并会帮助我。抱歉我的英文不好

Answer 1

将您拥有的结构转换为树是非常棘手的。您需要定义另一种类型来表示树节点，并且您需要一个递归函数来处理Field列表。

我建议使用以下结构：

case class TreeNode(name: String, icon: String, children: TreeNode*)

object Menu {
  val tree = TreeNode("parent", "0",
    TreeNode("child1", "1"),
    TreeNode("child2", "2"),
    TreeNode("child3", "3",
      TreeNode("grandchild1", "4"))
   )
}

您将需要一个递归函数（模板中的“代码块”）来呈现它：

@renderNode(n: TreeNode) = {
  <li>@n.name</li>
  @if(!n.children.isEmpty) {
    <ul>
      @for(c <- n.children) {
        @renderNode(c)
      }
    </ul>
  }
}

<ul>
   @renderNode(Menu.tree)
</ul>

我没有在Play模板中尝试过递归代码块，所以我不知道这是否有效！

如何在scala中显示树导航菜单？

1 个答案: