平台开发中的表格

html
<div class="widget-box">
        <table id="table"></table>
    </div>
    
js
var $table = $('#table');
    var first = 0;
    $(document).ready(function() {
        document.getElementById("alModelMenu").className = "submenu open";
        document.getElementById("userModel").className = "active";
        $("#queryDataBtn").click(function() {
            var pins =   $.trim($('#pins').val());
            if (pins.replace(/[，;: ；：]/ig,"") == "") {
                $('#pins').focus();
                alert("请输入有效 pin 列表！");
                return ;
            }
            pins = pins.replace(/[，;: ；：]/ig,",");
            $('#pins').val(pins);
            
            var url = "getUserPicture.do?pins="+pins;
            if(first==0){
                first=1;
                var clientHight = document.body.clientHeight*0.38;
                $table.bootstrapTable({
                    url: url,
                    height: clientHight,
                    columns: [ {
                        field: 'pin',
                        title: '用户'
                    }, {
                        field: 'shopOrder',
                        title: '购买店铺'
                    }, {
                        field: 'shopView',
                        title: '查看店铺'
                    }, {
                        field: 'pinCate3Prefer',
                        title: '三级品类偏好'
                    }, {
                        field: 'pinCate2Prefer',
                        title: '二级品类偏好'
                    }, {
                        field: 'pinCatePrefer',
                        title: '二三级偏好混排'
                    } , {
                        field: 'cmPin',
                        title: '移动、pc沉睡用户'
                    } , {
                        field: 'lepin',
                        title: '用户等级'
                    }, {
                        field: 'pinPriBra',
                        title: '偏好价格段'
                    }, {
                        field: 'PinCate3Brand',
                        title: '三级品牌偏好'
                    }, {
                        field: 'realTimePinCate3Prefer',
                        title: '实时三级品类偏好'
                    }, {
                        field: 'realTimePinCate2Prefer',
                        title: '实时二级品类偏好'
                    }, {
                        field: 'pinCate3PreferShort',
                        title: '短期偏好'
                    }, {
                        field: 'disoffLineVTagPrefer',
                        title: '内容偏好'
                    } , {
                        field: 'pinCat3',
                        title: '三级品类购买周期'
                    } , {
                        field: 'pinCate1Prefer',
                        title: '一级品类偏好'
                    } , {
                        field: 'pinCate1PreferLong',
                        title: '长期一级价格品类偏好'
                    } , {
                        field: 'pinCate3PreferVirtual',
                        title: '虚拟品类三级品类偏好'
                    } , {
                        field: 'pinPreferenceShop',
                        title: '实时店铺'
                    }      ]
                });
            }else{
                $table.bootstrapTable('refresh',{url: url});
            }
        });
        
        $("#idPin").click(function(){
            if($("#idPin").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pin');
            }else{
                $table.bootstrapTable('hideColumn', 'pin');
            }
        });
                $("#idShopOrder").click(function(){
            if($("#idShopOrder").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'shopOrder');
            }else{
                $table.bootstrapTable('hideColumn', 'shopOrder');
            }
        });
        
       $("#idShopView").click(function(){
            if($("#idShopView").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'shopView');
            }else{
                $table.bootstrapTable('hideColumn', 'shopView');
            }
        });
        
    
          $("#idPinPreferenceShop").click(function(){
            if($("#idPinPreferenceShop").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinPreferenceShop');
            }else{
                $table.bootstrapTable('hideColumn', 'pinPreferenceShop');
            }
        });
                $("#idPinCate1Prefer").click(function(){
            if($("#idPinCate1Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate1Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate1Prefer');
            }
        });
        
        $("#idPinCate2Prefer").click(function(){
            if($("#idPinCate2Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate2Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate2Prefer');
            }
        });
        
       $("#idPinCate3Prefer").click(function(){
            if($("#idPinCate3Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate3Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate3Prefer');
            }
        });
                $("#idPinCatePrefer").click(function(){
            if($("#idPinCatePrefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCatePrefer');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCatePrefer');
            }
        });
        
        $("#idDisoffLineVTagPrefer").click(function(){
            if($("#idDisoffLineVTagPrefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'disoffLineVTagPrefer');
            }else{
                $table.bootstrapTable('hideColumn', 'disoffLineVTagPrefer');
            }
        });
        
                        $("#idPinCate1PreferLong").click(function(){
            if($("#idPinCate1PreferLong").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate1PreferLong');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate1PreferLong');
            }
        });
                $("#idCmPin").click(function(){
            if($("#idCmPin").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'cmPin');
            }else{
                $table.bootstrapTable('hideColumn', 'cmPin');
            }
        });
        
                        $("#idLepin").click(function(){
            if($("#idLepin").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'lepin');
            }else{
                $table.bootstrapTable('hideColumn', 'lepin');
            }
        });
        
         $("#idPinPriBra").click(function(){
            if($("#idPinPriBra").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinPriBra');
            }else{
                $table.bootstrapTable('hideColumn', 'pinPriBra');
            }
        });
        
           $("#idPinCate3Brand").click(function(){
            if($("#idPinCate3Brand").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'PinCate3Brand');
            }else{
                $table.bootstrapTable('hideColumn', 'PinCate3Brand');
            }
        });
        
        $("#idRealTimePinCate2Prefer").click(function(){
            if($("#idRealTimePinCate2Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'realTimePinCate2Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'realTimePinCate2Prefer');
            }
        });
        
        $("#idRealTimePinCate3Prefer").click(function(){
            if($("#idRealTimePinCate3Prefer").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'realTimePinCate3Prefer');
            }else{
                $table.bootstrapTable('hideColumn', 'realTimePinCate3Prefer');
            }
        });
        
        $("#idPinCate3PreferShort").click(function(){
            if($("#idPinCate3PreferShort").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate3PreferShort');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate3PreferShort');
            }
        });
        
      $("#idPinCat3").click(function(){
            if($("#idPinCat3").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCat3');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCat3');
            }
        });
        
        $("#idPinCate3PreferVirtual").click(function(){
            if($("#idPinCate3PreferVirtual").attr("checked")=='checked'){
                $table.bootstrapTable('showColumn', 'pinCate3PreferVirtual');
            }else{
                $table.bootstrapTable('hideColumn', 'pinCate3PreferVirtual');
            }
        });
        
        //复选框的值.
        $("#all").click(function() {
            if ($(this).attr("checked") == 'checked') { // 全选
                $("input[name='clusters']").each(function() {
                    $(this).attr("checked", "checked");
                    $table.bootstrapTable('showColumn', 'pin');
                });
            } else { // 取消全选
                $("input[name='clusters']").each(function() {
                    $(this).removeAttr("checked");
                    $table.bootstrapTable('hideColumn', 'pin');
                });
            }
        });
        
  });