bootstrap3中模态框的数据编辑使用方法

模态框是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块内容，这个模态框折腾了 好久  幸好给解决了