bootstrap-table使用事项

效果如下图：


1、列中对象事件： 如隐藏栏，要获取每一行的点击事件，直接绑定图片的click会没有效果，因为在table里面把所有的事件都给off掉了，对于这种事件，只能引发onClickCell，不会传播到图片上去。解决这个问题有三个方法：
  
    （1）要使用图片的click事件，可以在onPostBody事件里加上绑定参数，这样每次绘制完表格，就会执行这个绑定，在table的off之后，就可以启用图片的click事件了：

1. onPostBody:function(){
   
2.                   $("td").undelegate('.isVisible');
   
3.                   $("td").delegate('.isVisible',"click",function(){
   
4.                                   if( $(this).find('i').hasClass('fa-eye')){
   
5.                                           var t = $(this).attr('data-rowId');
   
6.                                           alert( t);
   
7.                                   }else{
   
8.                                           alert( 'is invisible');
   
9.                                   }
   
10. 
    
11.                           });
12. }
    

  （2）或者放在onClickCell里面，先判断点击的列：

1. onClickCell: function( field, value, row, element) {
   
2.                                if( field == 'thumb'){
   
3.                                        $("#showMessage").html('点中thumb，'+field);
   
4.                                }else if ( field == 'check' ){
   
5.                                        var out = element.find('input');
   
6.                                        var is_check=out.is(':checked');
   
7.                                              
   
8.                                        setCheck( is_check, out.attr('data-index'));
   
9.                                }else{
   
10.                                        $("#showMessage").html('点中其他，'+ field);
    
11.                                }
12. }
    

   （3）第三种方法，就是利用

2.   '" title="选择操作" href="javascript:showEdit(' + index + ','+ row.id + ')">';
   
3.           //return '百度';
   
4.   }

2、全选删除按钮的代码：
其中selections是一个全局数组变量，表示选中的id， getSelectedId是另一个函数，返回值为选中的id数组，注意用了jquery的map函数。

1. cl_table.on('check.bs.table uncheck.bs.table ' +
   
2.           'check-all.bs.table uncheck-all.bs.table', function () {
   
3.       selections = getSelectedId();
   
4.       $("#remove").prop('disabled', !selections.length);
   
5.       $("#move").prop('disabled', !selections.length);
   
6.   });
   
7. 
   
8.   $("#remove").click(function () {
   
9.           if (!confirm("确认要删除吗？")) { return; }
   
10.           cl_table.bootstrapTable('remove', { field: 'id', values: selections });
    
11.           $("#remove").prop('disabled', true);
    
12.   });

  function getSelectedId() {
          return $.map(cl_table.bootstrapTable('getSelections'), function (row) {
              return row.id
          });
  }

3、