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,30)}}</td>
                <td>{{$task->status}}</td> {{-- Umformulierung in den Status!!! --}}
                <td>{{$users[($task->user_id)-1]->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- 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"   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" >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"   required>
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Beschreibung</label>
            <textarea class="form-control body" value=""  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"   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"   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"   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块内容，这个模态框折腾了 好久 幸好给解决了