学生管理之Bootstrap初体验

Bootstrap，来自 Twitter，是目前比较受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

Bootstrap使用起来非常方便，官方文档比较全面。我们以把学生管理系统中的【修改】使用模态框实现。过程如下：

一、导入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>

　　

二、使用模态框

1、添加修改按钮（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方式传递。

2、添加模态框

<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，以便后续提取和回显数据。

三、使用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>

　　

四、效果图

修改数据：

参考文献：

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