注册  

登录

• 首页
• 软件
• 前端设计
• 程序设计
• 标签
• 教程
• 专题
• 导航
  软件 前端设计 程序设计 Java相关 移动开发 数据库/运维 大数据/云 其他经验 常见问题 更多

ASP.net| C#| VB.Net| PHP| Swoole| ASP/ADO/VBScript| SQL语言| Python| Python3| Diango| C语言| Lua| C++| Go语言| Revel| Docker| Ruby| Perl| Erlang| R语言| Julia| Apex| OAuth 2.0| Arduino| 编程经验| 汇编语言| 树莓派| 游戏设计| MATLAB| Elasticsearch| Numpy| F#| Delphi| HTCondor| Rust| 易语言| NSQ|

用户登录

还没有账号?立即注册

用户注册

投稿取消

文章分类:

还能输入300字

上传中....

热门文章更多>>

• ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
• YII框架模块化处理操作示例
• 怎么用php实现求100以内的奇数
• php没有mb_substr()吗
• php怎么判断数组是否有某个元素
• php array value是数组吗
• php 怎么去除第一个数组元素
• php7怎么实现数组转字符串

标签更多>>

ios系统清理软件 word在字上加上划线 word格式是什么格式的文件怎么打开 word添加域添加目录 adwords自动标记 word2张怎么弄成一张 做账软件免费 word文档怎么恢复文件名 win8投影到第二屏幕 wordpress网站日志 3dsmax2016软件下载 2007word双虚线怎么打 word大黑点怎么打 word怎么不换页 word粘贴后跳页

专题更多>>

• Oracle 快速入门基础教程
• Unix入门教程
• 设计模式图文详解，编程初学者福音
• HTTP协议教程
• 算法入门基础知识
• 操作系统教程
• 计算机基础教程
• 数据结构第七章，数据结构树及树存储结构详解
• 数据结构基础教程，第六章数组和广义表详解
• 数据结构基础教程，第五章字符串

最新文章更多>>

• 详解angular中操作DOM元素的方法
• 一文聊聊Node多进程模型和项目部署
• 怎么用php实现求100以内的奇数
• php没有mb_substr()吗
• vue中什么是模块化
• vue中watch是什么属性
• 红米k40能插内存卡吗
• m2003j15sc是什么手机
• 苹果xr支持多少w快充
• 苹果13和13pro摄像头的区别是什么

阿联酋迪拜酋长

在 Laravel 5 中创建编辑模式

问题描述

我正在尝试为数据库中的每一行创建一个编辑模式.我的页面是这样的.

当我点击编辑图标时，我会打开一个模式，可以在其中编辑用户的详细信息.模态看起来像这样.

我打算展示的模态是这样的.

我的view.php

<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="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">联系方式</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="http://www.51sjk.com/Upload/Articles/1/0/333/333314_20221021152447489.js"></脚本><script src="http://www.51sjk.com/Upload/Articles/1/0/333/333314_20221021152448474.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/><script src="http://www.51sjk.com/Upload/Articles/1/0/333/333314_20221021152449214.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="http://www.51sjk.com/Upload/Articles/1/0/333/333314_20221021152447489.js"></script>
<script src="http://www.51sjk.com/Upload/Articles/1/0/333/333314_20221021152448474.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="http://www.51sjk.com/Upload/Articles/1/0/333/333314_20221021152449214.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.

• 0
• 0
• 0
• 0
• 0