作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
制表符中的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/
我是一名优秀的程序员,十分优秀!