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;
}