Spring Boot + Thymeleaf 动态表，行中带有复选框与控制器通信

Posted 2023-02-26

【中文标题】Spring Boot + Thymeleaf 动态表，行中带有复选框与控制器通信

【英文标题】：SpringBoot + Thymeleaf dinamic table with checkbox in row communicate with Controller

【发布时间】：2017-12-23 19:57:25

【问题描述】：

也许标题比它本身的问题更令人困惑。这是我的情况，在 Thymeleaf 中，我展示了一张包含客户列表的表格。它显示名称、姓氏、删除它的按钮和显示状态的复选框（如果用户处于活动或非活动状态）

<table class="table">
<thead>
<tr>
    <th>Name</th>
    <th>Last Name</th>
</tr>
</thead>
<tbody>
<tr th:each="client : $clientList">
    <td th:text="$client.name"></td>
    <td th:text="$client.lastName"></td>
    <td>
        <a th:href="@/delete_client/ + $client.id" class="btn btn-danger">Delete</a>
    </td>
    <td>
        <input type="checkbox" name="my-checkbox" th:checked="$client.state ? 'checked'">
    </td>

</tr>
</tbody>

到目前为止，没问题。但是我不知道如何在用户单击复选框时与控制器通信，以便禁用或启用该特定客户端。

类似于按钮删除客户端的作用，但改变它的状态。

有人告诉我使用 AJAX，但不知道如何使用。

谢谢！

【参考方案1】：

您可以避免使用 ajax。对于删除类似效果，您可以将以下步骤应用于包含复选框的 td 元素：

将form标签中的复选框包裹起来 在form 中提供正确的action 属性。该操作是处理客户端状态更新的端点（类似于/delete_client/） 在复选框中提供onclick="submit();"属性，当用户点击它时会触发提到的端点

例如

<td>
    <form th:action="@/switch_client_state/ + $client.id">
        <input type="checkbox" name="my-checkbox" onclick="submit();" th:checked="$client.state ? 'checked'">
    </form>
</td>

【讨论】：

谢谢@Jakub。我会试一试，让你知道

抱歉，我标记为正确为时已晚！感谢您的帮助！

@sebasira 没什么可抱歉的。很高兴我的回答对你有用！ :)