模态框是bootstrap3中比较好用得弹窗控件,这回使用了

说主要的,官方详细教程

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

模态框编辑的话

需要先获取数据  获取数据的方式有2种 一种是获取页面上的数据 传递过去

然后是用ajax获取数据,给弹窗赋值

下面说第一种  第一步  数据展示部分  添加编辑按钮呢

            @foreach ($tasks as $task)
<tr>
<td>{{$task->name}}</td>
<td>{{str_limit($task->body,)}}</td>
<td>{{$task->status}}</td> {{-- Umformulierung in den Status!!! --}}
<td>{{$users[($task->user_id)-]->name}}</td> {{-- Umformulierung in den Namen --}}
<td>{{$task->milestone->name}}</td>
<td>{{$task->duedate}}</td>
<td> <button data-name="{{$task->name}}" data-body="{{$task->body}}" data-username="{{$users[($task->user_id)-1]->name}}" data-milestone="{{$task->milestone->name}}" data-duedate="{{$task->duedate}}" data-id="{{$task->id}}" class="btn btn-success" data-toggle="modal" data-target="#tasksUpdate" >edit</button> </td> </tr>
@endforeach

循环获取的数据 进行编辑  把值用data-*得形式进行传递

对应的JS函数 使用show.bs.modal

代码如下   第二部 JS相关代码

   <script>

              $(function () { $('#tasksUpdate').on('show.bs.modal', function (event) {

                      var button = $(event.relatedTarget); // Button that triggered the modal
var id = button.data('id');
var name = button.data('name'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var username = button.data('username'); // Extract info from data-* attributes
var milestone = button.data('milestone') ;// Extract info from data-* attributes
var duedate = button.data('duedate'); // Extract info from data-* attributes var modal = $(this);
modal.find('.hiddenId').val(id);
modal.find('.name').val(name);
modal.find('.body').val(body);
modal.find('.datetimepickeredit').val(duedate);
})
}); </script>

3   看下模态框的代码

<!-- Modal tasks-->
<div class="modal fade" id="tasksUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Aufgabe erstellen & bearbeiten</h4>
</div>
<div class="modal-body">
<form action="{{ URL('aufgaben/update') }}" method="POST">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="form-group">
<label for="recipient-name" class="control-label">Bezeichnung der Aufgabe</label>
<input type="text" class="form-control name" name="name" id="namename" required>
</div>
<div class="form-group">
<label for="message-text" class="control-label">Beschreibung</label>
<textarea class="form-control body" value="" id="message-text" name="body" required></textarea>
</div>
<div class="form-group">
<label for="message-text" class="control-label">Verantwortlicher: </label>
<select class="form-control select2 user_id" style="width: 100%;" id="user_id" name="user_id" required>
@foreach ($users as $u)
<option value="{{$u->id}}">{{$u->name}}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="message-text" class="control-label">Milestone: </label>
<select class="form-control select2 milestone_id" style="width: 100%;" id="milestone_id" name="milestone_id" required>
@foreach ($meilensteine as $ms)
<option value="{{$ms->id}}">{{$ms->name}}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="datetimepicker" class="control-label">Datum F盲lligkeit</label>
<div class="input-group date">
<div class="input-group-addon" >
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right datetimepickeredit" id="datetimepickeredit" style="width:100%;" name="duedate" required/>
</div>
</div>
{{-- Einbindung einer notwenidigen js-Datei und "Aktivierung" des Kalendars der in dem input-Tag mit id:datetimepicker integriert ist--}}
<script src="{{ URL::asset('js/jquery.datetimepicker.full.js')}}"></script>
<script>
$("#datetimepickeredit").datetimepicker();
{{-- 脛ndern der Einstellung, damit die Monate in Deutsch angezeigt werden --}}
jQuery.datetimepicker.setLocale('de');
</script>
<div class="modal-footer">
<input type="hidden" class="hiddenId" name="hiddenId" >
<button type="button" class="btn btn-default" data-dismiss="modal">Schlie脽en</button>
<input type="submit" class="btn btn-primary" value="脛nderungen speichern">
</div>
</form>
</div>
</div>
</div>

主要是这3块内容,这个模态框折腾了 好久  幸好给解决了

bootstrap3中模态框的数据编辑使用方法的更多相关文章

  1. bootstrap3.0 模态框显示的文字超出怎么办

    版本:bootstrap3.3 模态框文字超出 解决方案: 在html中控制自动换行   其实只要在表格控制中添加一句<div style="word-break:break-all& ...

  2. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  3. boostrap中模态框显示在阴影之下

    boostrap中模态框显示在阴影之下 出现这种情况的原因我开始也搞了很久,问题出现在哪里呢? 有事问百度,在百度上查了一下资料,他们主要的解决办法:是 修改标签的z-index属性的值, 我试着改了 ...

  4. 黄聪:bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  5. bootstrap中模态框如果放入form表单中会存在的问题

    bootstrap中模态框如果放入form表单中会存在的问题:当模态框显示时,点回车会出现表单自动提交!!!所以在使用模态框的时候要特别注意!

  6. Html中模态框(弹出框)使用入门

    作为html学习学习模态框需要二步: 效果图 第一步学习HTML中 div的弹出 ①触发按钮         <input class="btn btn-success" i ...

  7. 解决vue中模态框内数据和外面的数据绑定的问题

    1.做表格的修改,把整条数据传到模态框做修改,但是出现模态框改变数据没有保存时,表格的数据也会跟着改变,我想实现保存以后表格数据才会改变的功能. html:使用item整条数据都上传过去了,在upda ...

  8. BootStrap中模态框踩坑

    在模态框中使用html标签上的自定义属性来打开模态框后,在使用JS关闭模态框,就会出现多层蒙板问题 出现这个问题的原因就是没有仔细看bootstrap的官方文档,我人麻了,搞了好久 务必将模态框的 H ...

  9. bootstrap中模态框、模态框的属性

    工作中有需要用到模态框的可以看看 <div class="modal fade" id="userModal" tabindex="-1&quo ...

随机推荐

  1. java内存的分配和管理

    常用的三个内存空间 栈内存 ,堆内存 ,方法区 栈内存存储的内容: 局部变量. 函数(栈中的局部变量,需要手动赋值.当变量,或者函数执行完毕,就自动被释放) 堆内存,存储的内容 :全局变量.数据容器. ...

  2. Eclipse使用前准备(转)

    Eclipse的发布流程 M1  08/19/2009      M2     09/30/2009     M3     11/11/2009     M4     12/16/2009     M ...

  3. 【转】每天一个linux命令(52):ifconfig命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/02/27/2934525.html 许多windows非常熟悉ipconfig命令行工具,它被用来获取网 ...

  4. 【转】每天一个linux命令(5):rm 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/10/26/2740521.html 昨天学习了创建文件和目录的命令mkdir ,今天学习一下linux中 ...

  5. Oracle DataBase单实例使用ASM案例(1)--ASM基本概念

    版权声明:本文为博主原创文章,未经博主允许不得转载. Oracle DataBase单实例使用ASM案例(1)--ASM基本概念 系统环境: 操作系统:RH EL5-64 Oracle 软件: Ora ...

  6. 声明变量(Declared Variable)和非声明变量(Undeclared Variable)的区别

    声明变量的作用域限制在其声明位置的上下文中,而非声明变量总是全局的. 声明变量在任何代码执行前创建,而非声明变量只有在执行赋值操作的时候才会被创建. 声明变量是它所在上下文环境的不可配置属性(non- ...

  7. nginx 官方docker镜像使用教程

    最近在看nignx,在本地虚拟机使用docker nginx镜像搭建了nginx+php环境 整理的教程如下: 拉取nginx镜像docker pull nginx 创建一个容器,并挂载本地目录doc ...

  8. Jupyter和IPython

    Jupyter内核就是IPython(Interactive Python):你看到的按tab键能够自动提示/补齐都是IPython实现的. IPython其实不只限于IPython,其实你看到的ID ...

  9. loadrunner 函数解释

    一.lr_save_string 使用介绍1.该函数主要是将程序中的常量或变量保存为lr中的参数.格式: //将常量保存为参数lr_save_string("777"," ...

  10. POJ1050最大子矩阵面积

    题目:http://poj.org/problem?id=1050 自己用了n^4的像暴搜一样的方法,感到有点奇怪——真的是这样? #include<iostream> #include& ...