无法使用制表符中的fa图标隐藏整个列

Question

我需要制表者问题的帮助。我放置了一个fa图标来隐藏和特定的列。该图标放置在表格的标题中，并且单击该图标时，整个列都应隐藏，但我无法这样做。

使用headerClick函数可以隐藏列，但我需要在图标上单击而不在制表符中单击标题时使用该功能。

这是有效的代码，但是我们需要启用单击Fa图标而不是单击标题的方法。

var showHideButtonFormatter = function(cell, formatterParams, onRendered){

    var btn = document.createElement("i");
    btn.classList.add("pull-right","fa","fa-eye-slash","btn");
    btn.setAttribute('type', 'button');

    var title = document.createElement("span");
    title.appendChild(btn);

    var textnode = document.createTextNode(formatterParams["titleName"]); 
    title.appendChild(textnode);
    title.style.css ="text-align:center"
    $(btn).on('click', function (e) {

    });

    return title;
}

//PriceBreakup Table --START

        var priceBreakupTablejsondata = [[${rfxForm.itemSupplierDetails}]];

        if(priceBreakupTablejsondata == "{}" || priceBreakupTablejsondata == null){
            priceBreakupTablejsondata = priceBreakupTablejsondata;
        }else{
            priceBreakupTablejsondata = JSON.parse(priceBreakupTablejsondata);
        }

        var columnsObjects =[]

         function showAllColumns(){
            columnsObjects.forEach(function(value, index, array) {
                value.show();
            });
        }

        var priceBreakupTable = new Tabulator("#priceBreakupTable", {
            height:310, 
            data:[],
            layout:"fitColumns",
            placeholder:"",
            columnVertAlign:"bottom",
            columns:[
                //{title:"#", field:"rownum ", widthGrow:1, formatter:"rownum"},
                {title:"Item", field:"item", widthGrow:2, headerSort:false},
                {title:"Quantity", field:"quantity", widthGrow:1, headerSort:false},
                {title:"UOM", field:"uom", align:"center", widthGrow:1, headerSort:false},

            ],

        });

        //column definition in the columns array

        if(priceBreakupTablejsondata!=null){
            for(i=0; i<Object.keys(priceBreakupTablejsondata).length; i++){

                var itemsArray = priceBreakupTablejsondata[i];
                var supplierArray = itemsArray.supplierList;

                for (var s = 0; s < supplierArray.length; s++) {

                    if (i==0) {
                         priceBreakupTable.addColumn(
                                { title:supplierArray[s].supplierName,align:"center", 
                                     headerClick:function(e, column){
                                        //e - the click event object
                                        //column - column component
                                         columnsObjects.push(column);
                                         column.hide();
                                    },
                                    titleFormatter:showHideButtonFormatter, titleFormatterParams:{"titleName":supplierArray[s].supplierName},
                                    columns:[
                                        {title:"Unit Rate", field:"unitRate_"+s, headerSort:false, align:"center", widthGrow:2},
                                        {title:"Tax Amount", field:"taxAmount_"+s, headerSort:false, align:"center", widthGrow:2},
                                        {title:"Total Amount", field:"totalAmount_"+s, headerSort:false, align:"center", widthGrow:2.2},
                                    ],
                                }
                                ,false);
                        }
                  }   
            }
        }

            function reformatData(itemJSON){
                var output = [];
                var totalSuppliers;
                var headersRow = {
                        item: "",
                        quantity: "",
                        uom: "",
                    }

                var itemsLength = Object.keys(itemJSON).length;
                for(i=0; i < itemsLength; i++){

                    var row = {
                        item:itemJSON[i].item,
                        quantity:itemJSON[i].quantity,
                        uom:itemJSON[i].uom,
                    }
                    var supplierArray = itemJSON[i].supplierList;

                    for(s=0; s < itemJSON[i].supplierList.length; s++){

                        totalSuppliers = itemJSON[i].supplierList.length
                        var supplierName = supplierArray[s].supplierName;
                         row["unitRate_"+s] = supplierArray[s].unitRate;
                         row["taxAmount_"+s] = supplierArray[s].taxAmount ;
                         row["totalAmount_"+s] = supplierArray[s].totalAmount ;

                    }
                        output.push(row);
                }

                for(hid=0; hid < totalSuppliers; hid++){
                    headersRow["unitRate_"+hid] = "Unit Rate";
                    headersRow["taxAmount_"+hid] = "Tax Amt.";
                    headersRow["totalAmount_"+hid] = "Total Amt.";          
                }
                //alert(JSON.stringify(headersRow));
                output.unshift(headersRow)
                return output;
            }


        if(priceBreakupTablejsondata!=null){
            priceBreakupTable.setData(reformatData(priceBreakupTablejsondata)); 
        }

        //PriceBreakup Table --END

Answer 1

标题格式器中btn的click事件监听器应该为：

btn.addEventListener("click", function(e){
    cell.getColumn().hide();
});