tabulator - 无法使用制表符中的 fa 图标隐藏整列
问题描述
我需要帮助来解决制表器中的问题。我放置了一个 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
解决方案
标题格式化程序中 btn 的单击事件侦听器应该是:
btn.addEventListener("click", function(e){
cell.getColumn().hide();
});
推荐阅读
- javascript - 如何打印具有数组的对象具有属性?反应原生
- c++ - 分配 C++ 指针
- mysql - 使用 Node.JS 和 MYSQL 删除数据库记录时出错
- xml - 为什么编辑休眠映射xml没有可见的类?
- typescript - 由于找不到 ts-node-dev,在 elasticbeanstalk 上运行 typescript 应用程序的问题
- ios - 为 UIViewPropertyAnimator 的 fractionComplete 设置大于 1 或小于 0 的值
- reactjs - 提交表单调用 API Next.js
- html - HTML 音频无法在移动设备上播放
- python - python Falcon更改请求URL的域名
- reactjs - React-Redux 如何显示复选框值?