编辑行

此示例展示了如何实现可编辑行。首先，让我们看看表格主体：

<table class="table delete-row-example">
  <thead>
    <tr>
      <th>姓名</th>
      <th>电子邮件</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: '正在编辑',
                                      showCancelButton: true,
                                      confirmButtonText: '是的，编辑此行！',
                                      text:'嘿！你已经在编辑一行了！你想取消该编辑并继续吗？'})
                           .then((result) => {
                                if(result.isConfirmed) {
                                   htmx.trigger(editing, 'cancel')
                                   htmx.trigger(this, 'edit')
                                }
                            })
                         } else {
                            htmx.trigger(this, '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 autofocus name='name' value='${contact.name}'></td>
  <td><input name='email' value='${contact.email}'></td>
  <td>
    <button class="btn danger" hx-get="/contact/${contact.id}">
      取消
    </button>
    <button class="btn danger" hx-put="/contact/${contact.id}" hx-include="closest tr">
      保存
    </button>
  </td>
</tr>

在这里，我们有几件事发生：首先，行本身可以响应 cancel 事件，这将带回 行的只读版本。有一个取消按钮允许 取消当前编辑。最后，有一个保存按钮发出 PUT 来更新联系人。请注意 有一个 hx-include，它包含最近的行中的所有输入。表格行由于 HTML 约束（您不能直接将 form 放在 tr 内）而 notoriously 难以与表单一起使用，因此 这使得事情更容易处理。

🔗Demo