Tabulator - добавить кнопку меню в заголовок столбца - PullRequest
Новая
       12

Tabulator - добавить кнопку меню в заголовок столбца

0 голосов
/ 14 ноября 2018

Я довольно плохо знаком с JavaScript и в настоящее время изучаю, как работать с Tabulator (который работает довольно хорошо, помимо этой проблемы).

Я хочу добавить кнопку меню в каждый заголовок столбца, который затем открывает раскрывающееся меню.В этом меню пользователь должен иметь возможность выбрать «Группировать по», а затем получить данные группы таблиц, используя выбранный столбец.

Кнопка, о которой идет речь, будет: 

<div class="ui icon top left pointing dropdown button" id=dropdown>
    <i class="bars icon"></i>
    <div class="menu">
        <div class="header">Options</div>
        <div class="item">Test</div>
    </div>
</div>

И будет выглядеть так:

Semantic UI Dropdown Button

Иэто мой текущий столбец данных: 

var table = new Tabulator("#example-table",{ 
        data:tabledata,
        layout:"fitColumns",
        locale:true,
        movableColumns:true,
        resizableColumns:false,
        columns:[
        {title:"Name", field:"name", headerFilter:"input"},
        {title:"Age", field:"age", align:"right", sorter:"number", headerFilter:"number", /* bottomCalc:"sum" */},
        {title:"Favorite Color", field:"col", headerFilter:"input"},
        {title:"Date of Birth", field:"dob", sorter:"date", align:"center", headerFilter:"input", headerContext:function(e, column){
                table.setGroupBy(column.getField());
                e.preventDefault();
            },
        },
        {title:"Nationality", field:"nationality", headerFilter:"input", headerContext:function(e, column){
                table.setGroupBy(column.getField());
                e.preventDefault();
            },
        },
        ],
        langs:{
            "de-de":{
                "headerFilters":{
                    "default":"Spalte filtern...",
                }
            }
        },
});

1 Ответ

0 голосов
/ 23 ноября 2018

Вы должны использовать titleFormatter , чтобы сделать это. Попытка манипулировать элементами внутри табулятора вне таблицы очень опасна, поскольку Tabulator использует виртуальные DOM-элементы, которые могут быть заменены без уведомления , что приводит к потере каких-либо привязок к плагинам.

Также плохой практикой является использование нескольких элементов на одной странице с одним и тем же идентификатором, что имеет место в приведенном выше решении. Идентификаторы элементов должны быть уникальными на странице

В этом случае ваш форматировщик заголовка будет выглядеть примерно так: 

var menuTitleFormatter = function(cell, formatterParams, onRendered){

    //build dropdown
    var dropdown =  document.createElement("div");

    dropdown.classList.add("dropdown");
    dropdown.classList.add("ui");

    dropdown.innerHTML = "<i class='bars icon'></i><div class='menu'><div class='header'>Options</div><div class='item' class='sort1'>Sort</div><div class='item' class='group1'>Group</div></div>";

    //create dropdown
    $(dropdown).dropdown();

    $('.group1', $(dropdown)).click(function(){
        //do something when the item is clicked
    });


    //set header title
    var title = document.createElement("span");
    title.innerHTML = cell.getValue();

    //add menu to title
    title.appendChild(dropdown);


    return title;
}

Вы можете применить его к столбцу в его определении 

{title:"Name", field:"name", titleFormatter:menuTitleFormatter },
...