批量更新

此演示展示了如何实现一个常见的模式，其中选择行然后进行批量更新。这是通过在表格周围放置一个表单，在表格中添加复选框，然后在表单提交（POST 请求）中包含选中值来完成的。

<form id="checked-contacts"
      hx-post="/users"
      hx-swap="outerHTML settle:3s"
      hx-target="#toast">
    <table>
      <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Active</th>
      </tr>
      </thead>
      <tbody id="tbody">
        <tr>
          <td>Joe Smith</td>
          <td>joe@smith.org</td>
          <td><input type="checkbox" name="active:joe@smith.org"></td>
        </tr>
        ...
      </tbody>
    </table>
    <input type="submit" value="Bulk Update" class="btn primary">
    <span id="toast"></span>
</form>

服务器将根据复选框的值批量更新状态。我们会回复一个关于更新的小提示消息，以通知用户，并使用 ARIA 礼貌地宣布更新以实现可访问性。

#toast.htmx-settling {
  opacity: 100;
}

#toast {
  background: #E1F0DA;
  opacity: 0;
  transition: opacity 3s ease-out;
}

最酷的一点是，由于 HTML 表单输入已经管理了自己的状态，我们无需重新渲染用户的表格中的任何部分。活动用户已选中，非活动用户已取消选中！

您可以在下面的代码中看到一个有效的示例。

🔗演示