久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

在 Laravel 5 中創(chuàng)建編輯模式

php問題 html5模板網(wǎng)
Creating an edit modal in Laravel 5(在 Laravel 5 中創(chuàng)建編輯模式)
本文介紹了在 Laravel 5 中創(chuàng)建編輯模式的處理方法，對大家解決問題具有一定的參考價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧！

問題描述

我正在嘗試為數(shù)據(jù)庫中的每一行創(chuàng)建一個(gè)編輯模式.我的頁面是這樣的.

當(dāng)我點(diǎn)擊編輯圖標(biāo)時(shí)，我會打開一個(gè)模式，可以在其中編輯用戶的詳細(xì)信息.模態(tài)看起來像這樣.

我打算展示的模態(tài)是這樣的.

我的view.php

<table id="example2" class="table table-bordered table-hover"><頭><tr><!-- <th></th>--><th>用戶名</th><th>聯(lián)系人</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="modalfade" 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><h4 class="modal-title" align="center"><b>編輯用戶</b></h4>

<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">用戶 ID</label><input type="text" class="form-control" name="user_id" placeholder="用戶ID" >

<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">聯(lián)系方式</label><input type="text" class="form-control" name="contact" placeholder="輸入聯(lián)系人">

<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">關(guān)閉</button><button type="submit" class="btn btn-primary">保存更改</button>

</表單>

我怎樣才能達(dá)到想要的輸出?

解決方案

這樣的事情就足夠了.

注意:我假設(shè)您正在為您的項(xiàng)目使用 bootstrap 4，盡管 bootstrap3 也可以，只需稍微調(diào)整一下以滿足您的需求

$(document).ready(function() {/*** 用于顯示編輯項(xiàng)彈出窗口*/$(document).on('click', "#edit-item", function() {$(this).addClass('edit-item-trigger-clicked');//用于識別點(diǎn)擊了哪個(gè)觸發(fā)器，從而從正確的行而不是錯(cuò)誤的行中獲取數(shù)據(jù).變量選項(xiàng) = {'背景':'靜態(tài)'};$('#edit-modal').modal(options)})//在模態(tài)顯示上$('#edit-modal').on('show.bs.modal', function() {var el = $(".edit-item-trigger-clicked");//看看它在這里有什么用?var row = el.closest(".data-row");//獲取數(shù)據(jù)var id = el.data('item-id');var name = row.children(".name").text();var description = row.children(".description").text();//填寫輸入字段中的數(shù)據(jù)$("#modal-input-id").val(id);$("#modal-input-name").val(name);$("#modal-input-description").val(description);})//模態(tài)隱藏$('#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" /><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><div class="main-container container-fluid"><!-- 標(biāo)題--><div class="container-fluid"><div class="row"><div class="col"><h1 class="text-primary mr-auto">示例列表</h1>

<!--/標(biāo)題--><!-- 表--><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">編輯數(shù)據(jù)</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">關(guān)閉</button>

<!--/Attachment Modal -->

建議

我建議您將表單包含在另一個(gè)刀片視圖中，使用所有相關(guān)數(shù)據(jù)渲染，然后將其返回給控制器，然后在模態(tài)中顯示.

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"  />
<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.

這篇關(guān)于在 Laravel 5 中創(chuàng)建編輯模式的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！

【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請聯(lián)系我們刪除處理，感謝您的支持！

相關(guān)文檔推薦

add new element in laravel collection object(在 Laravel 集合對象中添加新元素)
Laravel 5.5 API resources for collections (standalone data)(用于集合的 Laravel 5.5 API 資源(獨(dú)立數(shù)據(jù)))
What is the best practice to create a custom helper function in php Laravel 5?(在 php Laravel 5 中創(chuàng)建自定義輔助函數(shù)的最佳實(shí)踐是什么?)
No #39;Access-Control-Allow-Origin#39; header - Laravel(沒有“Access-Control-Allow-Origin標(biāo)頭 - Laravel)
Laravel Passport Route redirects to login page(Laravel Passport Route 重定向到登錄頁面)
How create package in Laravel 5?(如何在 Laravel 5 中創(chuàng)建包?)
主站蜘蛛池模板： 亚洲天堂中文字幕 | 国产乱码精品一区二区三区忘忧草 | 色婷婷综合网 | 国产精品日韩高清伦字幕搜索 | 在线色网| www.一区二区三区.com | 欧美精品成人影院 | 一区观看 | 亚洲国产网站 | 国产女人与拘做视频免费 | 欧美成人免费在线 | 久久成人精品 | 久久久91| 日韩中文字幕网 | h视频在线免费 | 在线视频一区二区 | 午夜一级黄色片 | 久久精品视频在线观看 | www.99re5.com| 亚洲成人一级 | 天天操 天天操 | 国产高清久久久 | 久久99久久久久 | 亚洲国产精品va在线看黑人 | 日韩伦理一区二区 | 久久国产精品网站 | 天堂在线www| 黑人巨大精品欧美一区二区免费 | 日韩一二三区 | 亚洲一区二区精品视频 | 日日操av| 久久新视频| 日本a在线| 国产欧美一区二区三区另类精品 | 91免费观看国产 | 亚洲国产视频一区二区 | 午夜在线视频一区二区三区 | 奇米超碰 | 日韩在线一区二区三区 | aaaaaa大片免费看最大的 | 韩日一区二区三区 |