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?

回答1:

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;
}

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

来源：https://stackoverflow.com/questions/54351569/changing-the-default-icon-in-the-responsivecollapse-model

标签

javascript

tabulator