制表符中的responsiveCollapse 折叠展开功能的默认图标似乎未居中。是否有更改此图标的选项。也许是右下胡萝卜?
最佳答案
responsiveCollapse 格式化程序只是一个像所有其他格式化程序一样的格式化程序,因此您可以创建一个按您喜欢的方式工作的格式化程序。
以下是内置格式化程序,您可以将其用作您自己的格式化程序的基础:
var customResponsiveCollapseFormatter = function(cell, formatterParams, onRendered){
var self = this,
open = false,
el = document.createElement("div");
function toggleList(isOpen){
var collapse = cell.getRow().getElement().getElementsByClassName("tabulator-responsive-collapse")[0];
open = isOpen;
if(open){
el.classList.add("open");
if(collapse){
collapse.style.display = '';
}
}else{
el.classList.remove("open");
if(collapse){
collapse.style.display = 'none';
}
}
}
el.classList.add("tabulator-responsive-collapse-toggle");
el.innerHTML = "<span class='tabulator-responsive-collapse-toggle-open'>+</span><span class='tabulator-responsive-collapse-toggle-close'>-</span>";
cell.getElement().classList.add("tabulator-row-handle");
if(self.table.options.responsiveLayoutCollapseStartOpen){
open = true;
}
el.addEventListener("click", function(){
toggleList(!open);
});
toggleList(open);
return el;
}
el.innerHTML =
行是设置元素内容的行,您可以在其中添加任何您喜欢的内容来自定义输出。
然后您可以在列定义中分配它:
{formatter:customResponsiveCollapseFormatter, headerSort:false},
有关如何使用自定义格式化程序的完整详细信息可以在 Formatting Documentation 中找到。
关于javascript - 更改responsiveCollapse模型中的默认+/-图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54351569/