带有 CRUD 的 Symfony 实体索引列表 - 需要模式进行编辑

Question

我在 Symfony 中创建了一个 CRUD 页面。 (symfony 5/bootstrap 4) 我现在有一个索引页面，其中的数据在每一行后面都有“显示，编辑”links，如下所示：

    <table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Topic</th>
            <th>Description</th>
            <th>DueDate</th>
            <th>Duration</th>
            <th>Status</th>
            <th>User</th>
            <th>actions</th>
        </tr>
    </thead>
    <tbody>
    {% for item in items %}
        <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.topic }}</td>
            <td>{{ item.description }}</td>
            <td>{{ item.dueDate ? item.dueDate|date('Y-m-d H:i:s') : '' }}</td>
            <td>{{ item.duration }}</td>
            <td>{{ item.status ? 'Yes' : 'No' }}</td>
            <td>{{ item.user }}</td>
            <td>
                <a href="{{ path('item_show', {'id': item.id}) }}">show</a>
                <a href="{{ path('item_edit', {'id': item.id}) }}">edit</a>
            </td>
        </tr>
    {% else %}
        <tr>
            <td colspan="8">no records found</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

现在编辑 link 转到另一个页面，但我想在模态中编辑它，例如这样的内容：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我应该怎么做？或者哪里有好的教程？

Answer 1

你可以使用 ajax 而不是这个 <a href="{{ path('item_edit', {'id': item.id}) }}">edit</a>

你可以做类似的事情:

<button type="button" onclick="Edit('{{ item.id}}')" class="btn-edit dropdown-item" data-toggle="modal" data-target="#exampleModalCenter">   edit </button>

然后创建名为 Edit 的函数 ajax（这是仅更新标签的示例，因此我获取输入值并将其放入名为 label 的变量中以作为函数编辑中的参数传递）

功能编辑（id）{

    $('button#editBtn').on('click', function () {
        var label = $('input#label').val()
        $.ajax({
            method: "PATCH",
            url: "/api/item/edit/" + id ,
            data: JSON.stringify({label: label}),
            
        }).done(function (res) {
            

        }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.responseText)
        })
    })
}

当然你需要在控制器中创建功能编辑

带有 CRUD 的 Symfony 实体索引列表 - 需要模式进行编辑

Symfony Entity index list with CRUD - need modal for edit

crud

symfony

bootstrap-modal