效果如下图:
bootstrap-table使用事项-LMLPHP

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. }
  (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、全选删除按钮的代码:
其中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.   $("#remove").click(function () {
  8.           if (!confirm("确认要删除吗?")) { return; }
  9.           cl_table.bootstrapTable('remove', { field: 'id', values: selections });
  10.           $("#remove").prop('disabled', true);
  11.   });

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


3、
12-17 20:16