Question

我想在html + thymeleaf中生成可点击的表格行，但我有以下问题。 AFAIK它无法用链接（a-tag）包装tr元素，因为表只能直接包含tr-subtags。所以我必须包装每个td-tag的内容，但这些值是由thymeleaf动态创建的！

将每行（将每行的每个td标记链接）链接到生成的网址的最佳方法是什么？是否有一些文本 - 前缀/后缀功能？

<tr th:each="item : ${itmes}">
    <td th:text="${{item.name}}">some name</td>
    <td th:text="${{item.date}}">01.03.2014</td>
    <td>author</td>
    <td>2</td>
    <td>
        <a th:href="@{/backend/items/{id}(id=${item.id})}" href="show.html"
           role="button" class="btn btn-default btn-circle">
            <i class="fa fa-info"></i>
        </a>
        <a th:href="@{/backend/items/{id}/update(id=${item.id})}" role="button" class="btn btn-warning btn-circle">
            <i class="fa fa-edit"></i>
        </a>
    </td>
</tr>

Answer 1

我必须解决与Tymeleaf非常相似的问题，而且我还需要将请求参数从item传递到url，所以我这样解决了：

<tr th:each="item : ${itmes}" style="cursor: pointer"
     th:onclick="'javascript:rowClicked(\'' + ${item.someField} + '\');'">
    ...
    <td>Some data</td>
    ...
</tr>

然后以某种方式包含脚本：

<script>
    function rowClicked(value) {
        location.href = "/myurl?param=" + value;
    }
</script>

Answer 2

执行此操作最不成问题的方法是使用javascript创建每个可点击的行。

例如。

$("#yourtablename tr").click(function() {
            //do more javascript code to meet your needs
      });

我个人会将一个href附加到其中一个tds，然后执行以下操作：

$("#yourtablename tr").click(function() {
                window.location = $(this).find('td:eq(5)').attr("href");
          });

希望有所帮助

Answer 3

对于最新的百里香叶版本，由于following issue，@ Andrew的回答将无效。该代码将必须进行如下修改：

<tr th:each="item : ${itmes}" style="cursor: pointer"
     th:some-field="${item.someField}" onclick="rowClicked(this.getAttribute('some-field'))">
    ...
    <td>Some data</td>
    ...
</tr>

Thymeleaf：可点击的行

3 个答案: