bootstraptable的冻结列check 无法选中的问题

• 最近公司使用的是bootstraptable ，在这个过程中使用的冻结列，但是添加了冻结列之后，原本表格自带的checkbox无法使用，导致大部分功能失效，在网上查了很多的资料，最后找到一个办法：

• 1. 你得理解冻结列的原理，冻结列实现的原理就是使用的表格复制，将原本的表格复制到上一层，自然新的一层的表格自带效果自然也就不起作用了，因为它失去了原本的事件绑定事件，所以自然复制的checkbox想通过原本的bootstraptable的getSellection 是不可能的，也就是说想使boot自带的getSelection 我们就要激活隐藏在上一层表格中的下一层表格：上源码，这篇文章主要是对冻结列问题，其他bootstrap table 的引入这里就不再赘述。
• 我主要使用checkbox的选中行，全选功能，已经通过输入选择确定的行，获取当前行的数据，通过网页的元素查看底层的生成表格的class或者name属性，并且对数据进行修改。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

//选中行 $('.fixed-table-container').on('click','tbody tr',function(){ //添加选中的样式 $(this).addClass('on').siblings('tr').removeClass('on'); var tbodys = $(this).parents('.fixed-table-container').find('table tbody') var num = $(this).index(); tbodys.each(function(){ $(this).find('tr').eq(num).addClass('on').siblings('tr').removeClass('on'); }); oTable.ajax.reload(); oTable1.ajax.reload(); //获取体检号 var physicalNum = $.trim($(this).find('td:nth-child(2)').text()); getAttachTable(physicalNum) }); //全选 $('.fixed-table-container').on('click','input[name="btSelectAll"]',function(){ if($(this).is(':checked')){ $('input[name="btSelectItem"]').prop('checked',true); }else{ $('input[name="btSelectItem"]').prop('checked',false); } }) //逐个选择 $('.fixed-table-container').on('click','input[name="btSelectItem"]',function(){ var inputs = $(this).parents('.fixed-table-body-columns').find('input[name="btSelectItem"]') var num = 0; inputs.each(function(){ if($(this).is(':checked')){ num++; } }); if(num==inputs.length){ $('input[name="btSelectAll"]').prop('checked',true); }else{ $('input[name="btSelectAll"]').prop('checked',false); } var index = $(this).parents('tr').index(); //对底层添加一个点击事件，激活底层的事件 $('#Table1').find('input[name="btSelectItem"]').eq(index).click(); }); //选择设置 $("#confirm").click(function(){ var begin=parseInt($("#begin").val())-1; var end=parseInt($("#end").val()); var checks=$(".checkitem") var inputs = $(".fixed-table-body-columns").find('input[name="btSelectItem"]'); var trs = $(".fixed-table-body-columns").find('tr'); console.log(inputs); var num = 0; for(var i=begin;i<end;i++){ num++; $(inputs[i]).prop('checked',true); $(trs[i]).addClass('on'); //对底层添加一个点击事件，激活底层的事件 $('#Table1').find('input[name="btSelectItem"]').eq(i).click(); $('#Table1 tbody').find('tr').eq(i).addClass('on'); } if(num==inputs.length){ $('input[name="btSelectAll"]').prop('checked',true); }else{ $('input[name="btSelectAll"]').prop('checked',false); } //var index = $(this).parents('tr').index(); //$('#Table1').find('input[name="btSelectItem"]').eq(index).click(); $('#selectSet').modal('hide'); });

• 通过对底层表格添加一个click事件，这样就可以对单个的checkbox通过getSelections也可以获取当前行的元素 。