久久久久久久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)建包?)
主站蜘蛛池模板： 国产高清在线精品 | 狠狠操狠狠操 | 日韩国产专区 | 伊人网国产 | 国产91黄色 | 国内精品成人 | 亚洲成人第一页 | 91av免费看| 亚洲久在线 | 国产不卡一 | 91视频免费观看 | 国产美女黄色片 | 一区二区福利视频 | 一区二区三区在线免费 | 91国内精品 | 久久久久国产 | 亚洲成人精品久久久 | 久久精品中文 | 国产精品爱久久久久久久 | 免费av手机在线观看 | 欧美黄色片| 精品成人69xx.xyz | 欧美精品在线看 | 国产一区二区三区网站 | 成人一区二区电影 | 成人在线免费观看视频 | 99热这里都是精品 | 天堂一区在线 | 亚洲精品播放 | 在线看亚洲 | 天天插天天干 | 欧美在线视频a | 亚洲国产黄色av | 国产欧美日韩综合精品一区二区 | 狠狠躁天天躁夜夜躁婷婷老牛影视 | av网站在线看 | 亚洲精品视频在线观看视频 | 日韩三级在线 | 久久久国产网站 | 国产精品www | 91视在线国内在线播放酒店 |