Изменение значка +/- по умолчанию в модели respiveCollapse - PullRequest
Новая
       7

Изменение значка +/- по умолчанию в модели respiveCollapse

0 голосов
/ 24 января 2019

Значок по умолчанию для функции развертывания разворачивания respiveCollapse в табуляторе выглядит не по центру.Есть варианты, чтобы изменить этот значок.Может быть, правильно и вниз морковь?

1 Ответ

0 голосов
/ 28 января 2019

Форматер responseiveCollapse - это просто средство форматирования, как и все остальные, поэтому вы можете создать его так, как вам нравится.

Вот сборкаФорматтер, который вы можете использовать в качестве основы для своего собственного: 

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

Полную информацию о том, как использовать пользовательские средства форматирования, можно найти в Документация по форматированию

...