Question

我正在尝试使用Thymeleaf和Twitter Bootstrap从元素列表中创建一个表。通过单击，每个表行都应该是可扩展的。

我正在尝试使用带有'data-toogle'和'accordion'的标准引导机制。

问题在于我无法让Thymeleaf从列表中打印每行的两行。我可以归档的最好的是以下内容，问题是开放体位于原始表格下。

    <table class="table table-striped table-hover">
        <thead>
                <th>Name</th>
                <th>Value</th>
        </thead>
        <tbody>
            <tr th:each="result: ${results}" th:attr="data-target='#accordion_'+${result.name}" data-toggle="collapse" class="accordion-toggle">
                    <td th:text="${result.name}"></td>
                    <td th:text="${result.value}"></td>
            </tr>

            <tr th:each="result: ${results}">
                    <td colspan="6" class="hiddenRow">
                        <div class="accordion-body collapse" th:id="'#accordion_'+${result.name}">there is nothing to see here (yet)
                        </div>
                    </td>
            </tr>
        </tbody>
    </table>

所以这里有不同的问题/答案：

Thymeleaf有没有办法在每个列表项中打印两行？
是否有更好的机制让Thymeleaf拥有可折叠的列表项？

Answer 1

您可以使用th:block标签在Thymeleaf中打印两行（未经测试）

<th:block th:each="result: ${results}">
    <tr th:attr="data-target='#accordion_'+${result.name}" data-toggle="collapse" class="accordion-toggle">
        <td th:text="${result.name}"></td>
        <td th:text="${result.value}"></td>
    </tr>
    <tr>
        <td colspan="6" class="hiddenRow">
            <div class="accordion-body collapse" th:id="'#accordion_'+${result.name}">there is nothing to see here (yet)</div>
        </td>
    </tr>
</th:block>

Thymeleaf with Bootstrap：折叠/手风琴表

1 个答案: