編輯列

這個範例展示如何實現可編輯的列。首先，我們先來看看表格主體

<table class="table delete-row-example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody hx-target="closest tr" hx-swap="outerHTML">
    ...
  </tbody>
</table>

這會指示表格內部的請求以觸發請求的最接近封閉列為目標，並替換整列。

這是列的 HTML

<tr>
      <td>${contact.name}</td>
      <td>${contact.email}</td>
      <td>
        <button class="btn danger"
                hx-get="/contact/${contact.id}/edit"
                hx-trigger="edit"
                onClick="let editing = document.querySelector('.editing')
                         if(editing) {
                           Swal.fire({title: 'Already Editing',
                                      showCancelButton: true,
                                      confirmButtonText: 'Yep, Edit This Row!',
                                      text:'Hey!  You are already editing a row!  Do you want to cancel that edit and continue?'})
                           .then((result) => {
                                if(result.isConfirmed) {
                                   htmx.trigger(editing, 'cancel')
                                   htmx.trigger(this, 'edit')
                                }
                            })
                         } else {
                            htmx.trigger(this, 'edit')
                         }">
          Edit
        </button>
      </td>
    </tr>

這裡我們使用一些 JavaScript 來使其更精細，只允許一次編輯一列。我們檢查是否有具有 .editing 類別的列，並確認使用者是否想要編輯此列並關閉其他列。如果是，我們會向其他列發送取消事件，以便它發出請求返回其初始狀態。

然後，我們在目前元素上觸發 edit 事件，這會觸發 htmx 請求以取得該列的可編輯版本。

請注意，如果您不關心使用者是否正在編輯多個列，您可以省略 hyperscript 和自訂的 hx-trigger，而只需讓正常的點擊處理與 htmx 一起運作即可。您也可以在點擊「編輯」按鈕時，簡單地以整個表格為目標來實作互斥性。在這裡，我們想展示如何整合 htmx 和 JavaScript 來解決問題並縮小伺服器互動範圍，此外，我們可以使用不錯的 SweetAlert 確認對話方塊。

最後，這是編輯資料時列的外觀

<tr hx-trigger='cancel' class='editing' hx-get="/contact/${contact.id}">
  <td><input name='name' value='${contact.name}'></td>
  <td><input name='email' value='${contact.email}'></td>
  <td>
    <button class="btn danger" hx-get="/contact/${contact.id}">
      Cancel
    </button>
    <button class="btn danger" hx-put="/contact/${contact.id}" hx-include="closest tr">
      Save
    </button>
  </td>
</tr>

這裡我們做了幾件事：首先，列本身可以回應 cancel 事件，這會帶回該列的唯讀版本。有一個取消按鈕允許取消目前編輯。最後，有一個儲存按鈕，會發出 PUT 請求以更新聯絡人。請注意，有一個 hx-include 包含最接近列中的所有輸入。由於 HTML 限制（您不能直接將 form 放在 tr 內），表格列在表單方面出了名的難以使用，因此這讓事情更容易處理一些。

🔗示範