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 [
        '',
        '',
      ].join('');
    }

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


image.png

模态框的使用

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


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

'',
 '',

我们可以看到上面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事件了,好像没法触发。不知道是我代码的问题,还是其他原因。

你可能感兴趣的:(bootstrap表格添加按钮配合模态框的使用)