批量更新

本页面演示了如何实现先选择行，然后批量更新的模式。这是通过在表格周围放置一个表单来实现的，表格中有复选框，然后在表单提交（POST请求）中包含选中的值：

<form id="checked-contacts"
      hx-post="/users"
      hx-swap="innerHTML 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>[email protected]</td>
          <td><input type="checkbox" name="active:[email protected]"></td>
        </tr>
        ...
      </tbody>
    </table>
    <input type="submit" value="Bulk Update" class="btn primary">
    <span id="toast"></span>
</form>

服务器将根据复选框的值批量更新状态。我们会用一条简短的 toast 消息来通知用户更新，并使用元素 <output> 礼貌地告知更新结果以实现可访问性。请注意，元素 <output> 适用于以特定形式通知操作的结果，但如果你需要展示与表单无关的通用消息，则使用 ARIA 实时区域会很有意义，例如 <p id="toast" aria-live="polite"></p> 。

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

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

很酷的是，因为 HTML 表单输入已经管理了自己的状态，所以我们不需要重新渲染用户表的任何部分。活跃内容表示已经选中，不活跃内容则表示被未选中！

你可以在下面看到此代码的工作示例。

Server Requests ↑ Show

演示