bootstrap表格添加按钮配合模态框的使用

使用bootstrap的时候，我们经常需要使用到表格，这时候通常又会设及到一些增删改查等功能，通常是以按钮的形式嵌入表格中，因此这里介绍一下如何在表格中添加按钮。同时按钮点击时通常会涉及到模态框，在这里也一并介绍。

表格添加按钮

$('#table').bootstrapTable({
        //若干参数
        columns: [{  //列参数
          field: 'sid',
          title: 'sid',
        }, {
          field: 'name',
          title: 'name'
        }, {
          field: 'grade',
          title: 'grade'
        },{
          field: 'password',
          title: 'password'
        },{
          field: 'Button',
          title: '操作',
          events: operateEvents,
          formatter:AddFunctionAlty//表格中增加按钮
        },
        ]
      });

从这里我们可以看到，在创建表格的时候，在column参数中，增加一列，title是操作里面定义了events:触发时的事件函数，formatter:添加按钮的函数。接下来我们看一下，如何定义events和formatter函数。

window.operateEvents = {
      "click #TableEditor":function(ev,value,row,index){
          //触发点击事件后 ...
      }
 }
//使用函数，添加按钮
    function AddFunctionAlty(value,row,index){
      return [
        '<button id = "TableEditor" type="button" class = "btn btn-info btngroup" data-target:"#myModal" >编辑</button>',
        '<button id = "TableDelete" type="button" class = "btn btn-info btngroup"  data-target:"#myModal">删除</button>',
      ].join('');
    }

创建表格的效果图如下所示：

image.png

模态框的使用

创建完带按钮的表格之后，我们通常会实现一些功能，比如点击上图中的编辑按钮，弹出一个模态框，然后我们填写内容，进行保存等。下面介绍一下模态框的使用。
模态框的定义：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <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">编辑</h4>
           </div>
           <div class="modal-body">
             <div class="form-group">
               <label for="sid">学号</label>
               <input type="text" name="sid" id="sid" class="form-control">
             </div>
             <div class="form-group">
               <label for="name">姓名</label>
               <input type="text" name="name" id="name" class="form-control">
             </div>
             <div class="form-group">
               <label for="grade">年级</label>
               <input type="text" name="grade" id="grade" class="form-control">
             </div>
             <div class="form-group">
               <label for="password">密码</label>
               <input type="text" name="password" id="password" class="form-control">
             </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal"><span class="" aria-hidden="true"></span>关闭</button>
             <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="" aria-hidden="true"></span>保存</button>
           </div>
         </div>
       </div>
     </div>

模态框主要有几个部分组成：
最外层div中是整个模态框包裹层，定义了class = 'modal fade' id 是为了使模态框具有单独的标识，因为可以定义多个模态框，不同模态框的触发通过id来控制。
第二个div定义了class = 'modal-dialog',里面就是你具体的设计对话框的内容了。这里分为modal-header,modal-body,modal-footer三个部分，其实你完全可以自己设计。
模态框的触发
模态框的触发有两种方式一种是静态触发，另外一种是动态触发。
静态触发是通过data属性完成的，在触发的元素身上绑定data-toggle = 'modal'。

'<button id = "TableEditor"data-toggle = "modal" data-target:"#myModal" >编辑</button>',
 '<button id = "TableDelete" data-toggle = "modal"  data-target:"#myModal">删除</button>',

我们可以看到上面button中有两个非常重要的属性：
data-target:用于高速触发的是哪个模态框，我们在上面说过每个模态框都定义了唯一的标识id ,通过设置data-target:'#id名称',我们就能触发相对应的模态框。
data-toggle:用于静态触发模态框，点击按钮以后，模态框就会自动弹出，不需要调用任何的js。
动态触发是通过js调用函数实现的

$('#myModal').modal();

非常简单的一条语句就可以实现模态框的动态触发。
按钮和模态框的配合使用
点击按钮以后，触发模态框，我们通常需要将表格的某一行数据自动填充到模态框中，如下图所示：

image.png
。
但是获取表格某一行的数据，通常是比较麻烦的，这里我们之前在定义表格时，定义了一个事件对象window.operateEvents，这个事件对象定义了表格中按钮的事件函数，事件函数中的参数为我们提供了这些数据。

 window.operateEvents = {
      "click #TableEditor":function(ev,value,row,index){
          $('#myModal').modal();
          $('.modal-body input[name = sid]').val(row.sid);
          $('.modal-body input[name = name]').val(row.name);
          $('.modal-body input[name = grade]').val(row.grade);
          $('.modal-body input[name = password]').val(row.password);
      }
    }

click事件函数中的参数有4个，ev，value，row，index，通过row我们可以获取到每一行的数据。这样的话就可以实现数据的自动填充了。这样的话，我们就实现了bootstrap表格添加按钮配合模态框的使用。
注意：这里有个小的坑，我们通过表格添加的按钮，无法再自己定义click事件了，好像没法触发。不知道是我代码的问题，还是其他原因。