更改 responsiveCollapse 模型中的默认 +/- 图标

Question

制表符中 responsiveCollapse 折叠展开功能的默认图标似乎没有居中。是否有更改此图标的选项。也许是右下胡萝卜？

Answer 1

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

更改 responsiveCollapse 模型中的默认 +/- 图标

Changing the default +/- icon in the responsiveCollapse model

javascript

tabulator