编辑行

本示页面演示了如何实现可编辑行。首先我们来看一下表格代码：

<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 和 custom 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 请求来更新联系人。请注意，有一个包含最近行中的所有输入的。由于 HTML 限制（不能将一个 hx-include 直接放在一个表单内），表格行在表单中使用起来非常困难，所以这让事情变得更容易处理。

Server Requests ↑ Show

演示