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-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 modalvar id = button.data('id');var name = button.data('name'); // Extract info from data-* attributesvar body = button.data('body'); // Extract info from data-* attributesvar username = button.data('username'); // Extract info from data-* attributesvar milestone = button.data('milestone') ;// Extract info from data-* attributesvar 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塊內容，這個模態框折騰了 好久? 幸好給解決了

posted on 2018-07-13 17:06?baker95935 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/baker95935/p/9306062.html

總結

以上是生活随笔為你收集整理的bootstrap3中模态框的数据编辑使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。