學生管理之Bootstrap初體驗

Bootstrap，來自 Twitter，是目前比較受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

Bootstrap使用起來很是方便，官方文檔比較全面。咱們以把學生管理系統中的【修改】使用模態框實現。過程以下：

1、導入bootstrap文件

導入bootstrap.css文件：

<link rel="stylesheet" href="/static/bootstrap.min.css">

　　

導入bootstrap.js文件：

<script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script type="text/javascript" src="/static/bootstrap.min.js"></script>

　　

2、使用模態框

一、添加修改按鈕（button）

 <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>標題</th>
                    <th>操做</th>
                    <th>修改</th>
                </tr>
            </thead>
            <tbody>
                {% for item in cls_list %}
                    <tr>
                        <td alex="id">{{ item.id }}</td>
                        <td alex="caption">{{ item.caption }}</td>
                        <td>
                            <a class="td-edit">編輯</a>| <a target="_blank" href="/edit_classes.html?nid={{ item.id }}">跳轉編輯</a> | <a class="td-delete" href="/delete_classes.html?nid={{ item.id }}" onclick="return confirm('肯定刪除嗎?');">刪除</a>
                        </td>
                        <td>
     <button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#update-classes" data-caption="{{ item.caption }}" data-classid="{{item.id}}">修改</button>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

　　注意：data-target指定目標模態框，模態框的id必須設置爲它。按鈕裏面的數據經過data-item方式傳遞。

二、添加模態框

<div class="modal fade" id="update-classes" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
     <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">×</span></button>
                <h4 class="modal-title" id="exampleModalLabel">修改信息</h4>
            </div>
         <div class="modal-body">
          <form>
              <div class="form-group">

                <input type="hidden" class="form-control" id="class-id" readonly="readonly">
              </div>

              <div class="form-group">
                <label for="caption" class="control-label">班級名</label>
                <input type="text" class="form-control" id="caption">
              </div>
          </form>
        </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            <button type="button" class="btn btn-primary" id="password-commit">更新</button>
        </div>
     </div>
    </div>
</div>

　　注意：設定modal的id爲update-classes，且設定class-id和caption，以便後續提取和回顯數據。

3、使用ajax修改信息

 <script>
     jQuery(document).ready(function() {
        jQuery('#update-classes').on('show.bs.modal', function (event) {
           //show.bs.modal調用以後當即觸發該事件。若是是經過點擊某個做爲觸發器的元素，則此元素能夠經過事件的 relatedTarget 屬性進行訪問。
            var button = jQuery(event.relatedTarget);  //觸發button
            var caption = button.data('caption');   //經過button獲取班級名
            var classid = button.data('classid');       //經過button獲取班級ID
            console.log(caption)
            jQuery('#class-id').val(classid);   //設置id=classid的值爲從button獲取的class-id
            jQuery('#caption').val(caption); //設置id=caption值爲從button獲取的caption
                  });

        jQuery('#password-commit').on('click', function(){
          //id爲password-commit的控件觸發後，執行操做
            var params = {};
            params['classid'] = jQuery('#class-id').val();  //獲取id=password-userid的值
            params['caption'] = jQuery('#caption').val(); //獲取id=password-manager-password的值
            console.log(params);  //控制檯顯示
            //經過ajax更新用戶密碼
            jQuery.post('/update_classes.html',
                params,
                function(data) {
                console.log(data)
                  if(data['status']){
                    alert('班級信息更新成功！');
                    jQuery('#update-classes').modal('hide');
                    //window.location.replace('/update_classes.html');
                    window.location.reload();
                  } else {
                    alert(data['error']);
                  }
                },
                'json'
            );
        });
     });
    </script>

　　

4、效果圖

 

修改數據：

 

 

 

 

 

 

參考文獻：

https://v3.bootcss.com/javascript/#modals