在 Laravel 5 中创建编辑模式

<table id="example2" class="table table-bordered table-hover"><头><tr><!-- <th></th>--><th>用户名</th><th>联系人</th><th>电子邮件</th><th>角色类型</th><th>动作</th></tr></thead>@foreach ($data 作为 $datas)<tr><td>{{ $datas->用户名}}</td><td>{{ $datas->contact }}</td><td>{{ $datas->email }}</td><td>角色类型</td><td><div class="btn-group"><button type="button" class="btn btn-info" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-edit"></I><button type="button" class="btn btn-info" data-toggle="modal" data-target="#delete-modal"><i class="fa fa-trash"></i>
</td></tr>@endforeach</tbody>

<div class="form-group"><label for="exampleInputEmail1">用户名</label><input type="text" class="form-control" name="username" placeholder="输入用户名">

<div class="form-group"><label for="exampleInputEmail1">电子邮件</label><input type="text" class="form-control" name="email" placeholder="输入电子邮件">

<div class="form-group"><label for="exampleInputEmail1">联系方式</label><input type="text" class="form-control" name="contact" placeholder="输入联系人">

<div class="form-group"><label for="exampleInputEmail1">更改密码</label><input type="password" class="form-control" name="change_password" placeholder="输入密码">

<div class="modal-footer"><button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button><button type="submit" class="btn btn-primary">保存更改</button>

</表单>

我怎样才能达到想要的输出?

这样的事情就足够了.

注意:我假设您正在为您的项目使用 bootstrap 4，尽管 bootstrap3 也可以，只需稍微调整一下以满足您的需求

$(document).ready(function() {/*** 用于显示编辑项弹出窗口*/$(document).on('click', "#edit-item", function() {$(this).addClass('edit-item-trigger-clicked');//用于识别点击了哪个触发器，从而从正确的行而不是错误的行中获取数据.变量选项 = {'背景':'静态'};$('#edit-modal').modal(options)})//在模态显示上$('#edit-modal').on('show.bs.modal', function() {var el = $(".edit-item-trigger-clicked");//看看它在这里有什么用?var row = el.closest(".data-row");//获取数据var id = el.data('item-id');var name = row.children(".name").text();var description = row.children(".description").text();//填写输入字段中的数据$("#modal-input-id").val(id);$("#modal-input-name").val(name);$("#modal-input-description").val(description);})//模态隐藏$('#edit-modal').on('hide.bs.modal', function() {$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')$("#edit-form").trigger("reset");})})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><div class="main-container container-fluid"><!-- 标题--><div class="container-fluid"><div class="row"><div class="col"><h1 class="text-primary mr-auto">示例列表</h1>

<!--/标题--><!-- 表--><table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%"><thead class="thead-dark"><tr><th>#</th><th>名称<th>描述<th>动作</tr></thead><tr class="data-row"><td class="align-middle迭代">1</td><td class="align-middle name">Name 1</td><td class="align-middle word-break description">Description 1</td><td class="align-middle"><button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button></td></tr><tr class="data-row"><td class="align-middle迭代">2</td><td class="align-middle name">Name 2</td><td class="align-middle word-break description">Description 2</td><td class="align-middle"><button type="button" class="btn btn-success" id="edit-item" data-item-id="2">edit</button></td></tr></tbody><!--/table -->

<!-- 附件模式 --><div class="modalfade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="edit-modal-label">编辑数据</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

<div class="modal-body" id="attachment-body-content"><form id="edit-form" class="form-horizo​​ntal" method="POST" action=""><div class="card text-white bg-dark mb-0"><div class="card-header"><h2 class="m-0">编辑</h2>

<div class="card-body"><!-- id --><div class="form-group"><label class="col-form-label" for="modal-input-id">Id(仅供参考，不打算向公众展示)</label><input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>

<!--/id --><!-- 名称--><div class="form-group"><label class="col-form-label" for="modal-input-name">Name</label><input type="text" name="modal-input-name" class="form-control" id="modal-input-name" 需要自动对焦>

<!--/名称--><!-- 描述--><div class="form-group"><label class="col-form-label" for="modal-input-description">电子邮件</label><input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>

<!--/描述-->

</表单>

<div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">完成</button><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

<!--/Attachment Modal -->

建议

我建议您将表单包含在另一个刀片视图中，使用所有相关数据渲染，然后将其返回给控制器，然后在模态中显示.

I am trying to create an edit modal for each row in the database. My page looks like this.

When I click on the edit icon, I open a modal where a user's details can be edited. The modal looks like this.

The modal I intend to show is like this.

My view.php

<div class="box-body">
  <table id="example2" class="table table-bordered table-hover">
    <thead>
      <tr>
        <!-- <th></th> -->
        <th>Username</th>
        <th>Contact</th>
        <th>Email</th>
        <th>Role Type</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      @foreach ($data as $datas)
        <tr>
          <td>{{ $datas->username }}</td>
          <td>{{ $datas->contact }}</td>
          <td>{{ $datas->email }}</td>
          <td>Role Type</td>
          <td>
            <div class="btn-group">
              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#edit-modal">
                <i class="fa fa-edit"></I>
              </button>
              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#delete-modal">
                <i class="fa fa-trash"></i>
              </button>
            </div>
          </td>
        </tr>
      @endforeach
    </tbody>
  </table>
</div>

<div class="modal fade" id="edit-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" align="center"><b>Edit User</b></h4>
      </div>
      <div class="modal-body">
        <form role="form" action="/edit_user">
          <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
          <div class="box-body">
            <div class="form-group">
              <label for="exampleInputEmail1">User ID</label> 
              <input type="text" class="form-control" name="user_id" placeholder="User ID" >
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Username</label> 
              <input type="text" class="form-control" name="username" placeholder="Enter username">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Email</label> 
              <input type="text" class="form-control" name="email" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Contact</label> 
              <input type="text" class="form-control" name="contact" placeholder="Enter contact">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Change Password</label> 
              <input type="password" class="form-control" name="change_password" placeholder="Enter password">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

How can I achieve the desired output?

Something like this would suffice.

Note: I assume you are using bootstrap 4 for your project, although bootstrap 3 would work too, just tweak it a bit to suit your needs

$(document).ready(function() {
  /**
   * for showing edit item popup
   */

  $(document).on('click', "#edit-item", function() {
    $(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.

    var options = {
      'backdrop': 'static'
    };
    $('#edit-modal').modal(options)
  })

  // on modal show
  $('#edit-modal').on('show.bs.modal', function() {
    var el = $(".edit-item-trigger-clicked"); // See how its usefull right here? 
    var row = el.closest(".data-row");

    // get the data
    var id = el.data('item-id');
    var name = row.children(".name").text();
    var description = row.children(".description").text();

    // fill the data in the input fields
    $("#modal-input-id").val(id);
    $("#modal-input-name").val(name);
    $("#modal-input-description").val(description);

  })

  // on modal hide
  $('#edit-modal').on('hide.bs.modal', function() {
    $('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
    $("#edit-form").trigger("reset");
  })
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<div class="main-container container-fluid">
  <!-- heading -->
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <h1 class="text-primary mr-auto">Example list</h1>
      </div>
    </div>
  </div>
  <!-- /heading -->
  <!-- table -->
  <table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
    <thead class="thead-dark">
      <tr>
        <th>#</th>
        <th> Name</th>
        <th> Description</th>
        <th> Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="data-row">
        <td class="align-middle iteration">1</td>
        <td class="align-middle name">Name 1</td>
        <td class="align-middle word-break description">Description 1</td>
        <td class="align-middle">
          <button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
        </td>
      </tr>
      <tr class="data-row">
        <td class="align-middle iteration">2</td>
        <td class="align-middle name">Name 2</td>
        <td class="align-middle word-break description">Description 2</td>
        <td class="align-middle">
          <button type="button" class="btn btn-success" id="edit-item" data-item-id="2">edit</button>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="attachment-body-content">
        <form id="edit-form" class="form-horizontal" method="POST" action="">
          <div class="card text-white bg-dark mb-0">
            <div class="card-header">
              <h2 class="m-0">Edit</h2>
            </div>
            <div class="card-body">
              <!-- id -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
                <input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
              </div>
              <!-- /id -->
              <!-- name -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-name">Name</label>
                <input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
              </div>
              <!-- /name -->
              <!-- description -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-description">Email</label>
                <input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
              </div>
              <!-- /description -->
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- /Attachment Modal -->

Suggestion

I would recommend you to include the form in another blade view, render it with all the relevant data and then return it to the controller then show it in the modal.

这篇关于在 Laravel 5 中创建编辑模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！