播放框架模板：如何在表格中开始新行？答案

【问题标题】：Play framework templates: how to start a new row in a table?播放框架模板：如何在表格中开始新行？
【发布时间】：2014-09-13 10:39:42
【问题描述】：

我有对象列表，我想使用 Play Framework 模板进行渲染。

@(cats: List[Category])

@category(cat: Category) = {
    <td><button class="btn btn-info">@cat.name</button></td>
}

<div class="modal-body">
    <table class="table">
        <tbody>
            @cats.map { case cat =>
                @category(cat)
            }
        </tbody>
    </table>
</div>

所以如果列表中有 9 个元素，它们都将在一行中。

我想要的是最多包含 3 个元素的行。所以它会是这样的：

A B C 
D E F 
G H I

我想我可以用索引列表压缩我的列表并将每第三个元素设置为一个新行。但我不知道该怎么做。

想法？

谢谢。

【问题讨论】：

标签： scala playframework playframework-2.0

【解决方案1】：

您可以使用grouped 对列表进行分组，它会返回一个列表列表：

scala> List(1,2,3,4,5,6).grouped(3).toList
res13: List[List[Int]] = List(List(1, 2, 3), List(4, 5, 6))

你的情况应该是这样的：

@(cats: List[String])

@category(groupedCats: List[String]) = {
    @groupedCats.map { cat =>
        <td><button class="btn btn-info">@cat</button></td>
    }
}

<div class="modal-body">
  <table class="table">
    <tbody>
      @cats.grouped(3).toList.map { grouped =>
        <tr>@category(grouped)</tr>
      }
    </tbody>
  </table>
</div>

通过这种方式，您将一个包含 3 个元素的列表传递给 @category，这些元素被包裹在 td 标记中。

【讨论】：

【解决方案2】：

当然可以zipWithIndex，不用分组，用模块比较代替：

<table>
  <tr>
    @for((cat, index) <- cats.zipWithIndex) {
        <td>@cat</td>
        @if((index+1) % 3 == 0){</tr><tr>}  @* Close old row if has 3 elements and open new *@
    }
  </tr>
</table>

【讨论】：