批量更新

這個示範展示如何實現一個常見的模式，即選取多個行並進行批量更新。這通過將一個表格包在表單中，在表格中使用複選框，然後將選中的值包含在表單提交 (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 表單輸入已經管理著它們自己的狀態，我們不需要重新渲染用戶表格的任何部分。活躍用戶已經被選中，而非活躍用戶則未被選中！

您可以在下面看到這個程式碼的實際範例。

🔗示範