更改响应折叠模型中的默认 +/- 图标 [英] Changing the default +/- icon in the responsiveCollapse model

问题描述

制表器中响应式折叠折叠展开功能的默认图标似乎未居中.是否有更改此图标的选项.也许是正确的胡萝卜?

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屋！