问题描述
限时送ChatGPT账号..制表器中响应式折叠折叠展开功能的默认图标似乎未居中.是否有更改此图标的选项.也许是正确的胡萝卜?
The default icon for the responsiveCollapse collapse expand feature in tabulator appears not to be centered. Are there options to change this icon. Maybe a right and down carrot?
推荐答案
responsiveCollapse 格式化程序与所有其他格式化程序一样,因此您可以创建一个随心所欲.
The responsiveCollapse formatter is just a formatter like all the others, as such you can create one that works however you like.
这是您可以用作自己基础的格式化程序的构建:
Here is the build in formatter you can use as a basis for your own:
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 =
行是设置元素内容的那一行,您可以在其中添加任何您喜欢的内容来自定义输出.
The el.innerHTML =
line is the one that sets the content of the element, you could add whatever you like in there to customize the output.
然后您可以在列定义中分配它:
You can then assign it in a column definition:
{formatter:customResponsiveCollapseFormatter, headerSort:false},
有关如何使用自定义格式化程序的完整详细信息,请参阅格式化文档一个>
Full details on how to use custom formatters can be found in the Formatting Documentation
这篇关于更改响应折叠模型中的默认 +/- 图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论