bootstrapTable与dataTable设置第一列复选框并且更改默认样式

dataTable设置第一列复选框并且直接设置label标签,用来关联复选框更改样式;
此为初始化dataTable时设置数据格式,并且添加复选框与label

"columns": [
            { "data": "id","title": "<input align=\"center\" type=\"checkbox\" class=\"checkAll\" id=\"checkAll\"/><label for=\"checkAll\"></label>",render:function(data,type,row,meat){
                return '<input  name="name" type="checkbox" id='+data+' value='+data+'><label id='+data+'  for="checkAll"></label>'}},
{ "data": "a","title": "序号",render:function(data,type,row,meat){
   return meat.row + 1+ meat.settings._iDisplayStart
}},

           { "data": "name","title": "样本名称"},
           { "data": "step","title": "步长" },
           { "data": "startTime","title": "开始时间"},
           { "data": "enddTime","title": "结束时间"},
           { "data": "sunMax","title": "最大值"},
           { "data": "sunMin","title": "最小值"},
           { "data": "description","title": "说明"}
       ]
   } );

下面为点击首项选中子项;子项全选,首项选中

$('#checkAll').click( function () {
    if (this.checked) {
        $(this).attr('checked','checked')
        $("input[name='name']").each(function () {
            this.checked = true;
        });
    } else {
        $(this).removeAttr('checked')
        $("input[name='name']").each(function () {
            this.checked = false;
        });
    }
});
由于dataTable好像没有点击行选中复选框设置(也可能我没找到),手动设置:

$("#myTable").on("click", "tr", function (){//点击表格的某一行复选框选中
    if ($(this)[0].className == '') {
        return
    }
    if($(this).find(":checkbox").prop("checked")){
        $(this).find(":checkbox").prop("checked",false);
    }else{
        $(this).find(":checkbox").prop("checked",true);
    }
    $("#myTable tr input").click(function(ev){
        ev.stopPropagation();
    })
})

最后设置复选框选中的样式:

#myTable input{
  display: none;
}
#myTable input + label{
  background-color: white;
  border-radius: 5px;
  border:1px solid #d3d3d3;
  width:20px;
  height:20px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
}
#myTable input:checked + label{
  background:rgba(0,110,107,1);
}
#myTable input:checked + label:after{
  content:"\2714";
  color: #fff;
}

下面介绍bootstrapTable设置第一列复选框并且直接设置label标签,用来关联复选框更改样式:

clickToSelect: true,//bootstrapTable的点击选中行

columns: [
                      { field: 'check',  checkbox: true, formatter: function (value, row, index) {
//                              if (row.check == true) {
//                                  //设置选中
//                                  return {  checked: true };
//                              }
                          },width:'54px',

                      },
                      {field: 'unitName',  title: '机组名称' },
                      {field: 'unitCap', title: '机组容量'},
                      {field: 'unitMaxPower', title: '最大出力'},
                      {field: 'unitMinPower', title: '最小出力'},
                      {field: 'rampRateMax', title: '上爬坡率'  },
                      {field: 'rampRateMin', title: '下爬坡率'  },
                      {field: 'isHaveLimited', title: '电量约束'},
                      {field: 'unitDescription', title: '说明'  },
                  ],

给表格中的input元素js生成label标签

<!--表格事件,当表格加载完成后给表格中的复选框添加label-->
$("#table").on('post-body.bs.table',function(data){
    console.log(1111)
    $(this).find("input:checkbox").each(function (i) {
        var $check = $(this);
        if ($check.attr("id") && $check.next("label")) {
            return;
        }
        $check.next().remove();
        var name = $check.attr("name");
        var id = name + "-" + i;
        var $label = $('<label for="'+ id +'"></label>');
        $check.attr("id", id).parent().addClass("checkbox-custom").append($label);
    });
});

最后设置复选框选中的样式:

#myTable input{
  display: none;
}
#myTable input + label{
  background-color: white;
  border-radius: 5px;
  border:1px solid #d3d3d3;
  width:20px;
  height:20px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
}
#myTable input:checked + label{
  background:rgba(0,110,107,1);
}
#myTable input:checked + label:after{
  content:"\2714";
  color: #fff;
}