背景：記錄寫hostmanger中用戶下拉框關聯部門遇到的問題及解決方法
問題：需求是展示頁面展示用戶所屬的部門，點擊修改按鈕后，彈出對應的model，這個時候部門的select要默認選中用戶所在的select
如下圖所示：
點擊修改彈出model如下：
默認這塊顯示的是select的第一個option
解決辦法：
在點擊【修改】按鈕的時候，可以首先取到這行數據部門列的id和value，在model彈出后，對model中的select元素做操作，如果select中的option的值等於剛才取到的value，則給這個option添加selected=selected屬性
首先想到的是利用bootstrap的事件如shown.bs.modal來實現
但是測試的問題是，這個事件並不是在模態對話框出來后執行，而是在模態對話框之前執行，示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" href="bootstrap.css" %}"> </head> <body> <!--表格展示--> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title">用戶詳細信息</h3> </div> <div class="box-body"> <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap"> </div> </div> <!-- Table field --> <div class="row"> <div class="col-sm-12"> <table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info"> <!--thead--> <thead> <tr role="row"> <th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 50px;">賬號ID</th> <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 80px;">賬號</th> <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 90px;">操作</th> </tr> </thead> <!--tbody--> <tbody> <tr role="row" class="odd"> <td class="sorting_1" id="id">1</td> <td id="department_name">robin</td> <td> <!--<button type="button" class="btn btn-primary btn-lg" onclick="openModal();"></button>--> <button id="modify_user" data-toggle="modal" data-target="#modify_user_modal" class="btn btn-info" onclick="openModal();">修改</button> <button id="delete_user" data-toggle="modal" data-target="#delete_user_modal" class="btn btn-info">刪除</button> </td> </tr> </tbody> <!--tfoot--> </table> </div> </div> </div> </div> </div> </section> <!--修改用戶模態對話框--> <div id="myModal" class="modal"> <div class="modal-dialog" style="margin-top: 200px;"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">修改賬戶信息</h4> </div> <div class="modal-body"> <form id="modify_user_form" action="/page/userinfo/" role="form" method="post"> <div class="form-group"> <label>登錄名</label> <input type="text" class="form-control" id="modify_user_name" name='modify_user_name' placeholder="如: sys.yourname" readonly autofocus > </div> <div class="form-group"> <label>備注</label> <input type="textarea" class="form-control" id="add_user_description" name='add_user_description' placeholder="請用一句話描述創建的虛擬用戶，不要包含特殊字符..."> </div> <div class="modal-footer"> <input type="text" name="request-type" value="modify" class="hide"> <button id="modify_user_cancel_btn" type="submit" class="btn btn-default" data-dismiss="modal">取消</button> <button id="modify_user_confirm_btn" type="submit" class="btn btn-primary disabled">修改</button> </div> </form> </div> </div> </div> </div> <script src="jquery-3.2.1.js"> </script> <script src="bootstrap.js"> </script> <script> function openModal() { console.log("before open action"); $('#myModal').modal({ backdrop: true, keyboard: false, show: true, remote: "template.html" }); console.log("after open action"); } $('#myModal').on('shown.bs.modal', function(e) { var btn =$(e.relatedTarget); // btn表示的是觸發這個model的刪除按鈕 alert('在模態框顯示完畢后觸發！'); }); </script> </body> </html>
點擊【修改】
然后
很顯然數據顯示的順序是有問題的~~~~~
最后發現原因是 model的class 必須有fade樣式
最后發現原因是 model的class 必須有fade樣式
最后發現原因是 model的class 必須有fade樣式
如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel="stylesheet" href="bootstrap.css" %}"> </head> <body> <!--表格展示--> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title">用戶詳細信息</h3> </div> <div class="box-body"> <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap"> </div> </div> <!-- Table field --> <div class="row"> <div class="col-sm-12"> <table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info"> <!--thead--> <thead> <tr role="row"> <th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 50px;">賬號ID</th> <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 80px;">賬號</th> <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 90px;">操作</th> </tr> </thead> <!--tbody--> <tbody> <tr role="row" class="odd"> <td class="sorting_1" id="id">1</td> <td id="department_name">robin</td> <td> <!--<button type="button" class="btn btn-primary btn-lg" onclick="openModal();"></button>--> <button id="modify_user" data-toggle="modal" data-target="#modify_user_modal" class="btn btn-info" onclick="openModal();">修改</button> <button id="delete_user" data-toggle="modal" data-target="#delete_user_modal" class="btn btn-info">刪除</button> </td> </tr> </tbody> <!--tfoot--> </table> </div> </div> </div> </div> </div> </section> <!--修改用戶模態對話框--> <div id="myModal" class="modal fade"> <!--- fade fade fade -> <div class="modal-dialog" style="margin-top: 200px;"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">修改賬戶信息</h4> </div> <div class="modal-body"> <form id="modify_user_form" action="/page/userinfo/" role="form" method="post"> <div class="form-group"> <label>登錄名</label> <input type="text" class="form-control" id="modify_user_name" name='modify_user_name' placeholder="如: sys.yourname" readonly autofocus > </div> <div class="form-group"> <label>備注</label> <input type="textarea" class="form-control" id="add_user_description" name='add_user_description' placeholder="請用一句話描述創建的虛擬用戶，不要包含特殊字符..."> </div> <div class="modal-footer"> <input type="text" name="request-type" value="modify" class="hide"> <button id="modify_user_cancel_btn" type="submit" class="btn btn-default" data-dismiss="modal">取消</button> <button id="modify_user_confirm_btn" type="submit" class="btn btn-primary disabled">修改</button> </div> </form> </div> </div> </div> </div> <!-- 需引用jquery 和 bootstrap.js--> <script src="jquery-3.2.1.js"> </script> <script src="bootstrap.js"> </script> <script> function openModal() { console.log("before open action"); $('#myModal').modal({ backdrop: true, keyboard: false, show: true, remote: "template.html" }); console.log("after open action"); } $('#myModal').on('shown.bs.modal', function(e) { var btn =$(e.relatedTarget); // btn表示的是觸發這個model的刪除按鈕,通過這個再去操作頁面的其他元素 alert('在模態框顯示完畢后觸發！'); }); </script> </body> </html>
效果：
使用 data-target="#modify_user_modal" 這種方式觸發模態對話框時， bootstrap按鈕上綁定函數的執行順序
onclick綁定自定義的函數-----> 模態對話框展示------->shown.bs.modal事件
參考文章：
http://v3.bootcss.com/javascript/#modals-events
https://github.com/zhbhun/bootstrap-study-demo/blob/master/modal/event-demo.html
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
https://segmentfault.com/q/1010000005085719