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

时间：2022-02-27 07:02:46

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

相关文章