制表符 - 将菜单按钮添加到列 header

Question

我是 JavaScript 的新手，目前正在学习如何使用 Tabulator（除此问题外它工作得很好）。

我想向每一列添加一个菜单按钮 header，然后打开一个下拉菜单。从此菜单中，用户应该能够 select "Group By"，然后使用 selected 列对 table 组数据进行分组。

有问题的按钮是：

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

看起来像这样：

这是我当前的专栏数据：

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...",
                }
            }
        },
});

Answer 1

更新

从 Tabulator 4.7 开始，现在内置了使用新的 headerMenu 向列添加 header 菜单的功能选项：

//define row context menu
var headerMenu = [
    {
        label:"Hide Column",
        action:function(e, column){
            column.hide();
        }
    },
]

//add header menu in column definition
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", width:200, headerMenu:headerMenu}, //add menu to this column header
    ]
});

有关可用功能的完整详细信息，请查看 Menu Documentation

原答案

您应该使用 titleFormatter 来执行此操作，尝试从 table 外部操作制表符内部的元素非常危险，因为 Tabulator 使用虚拟 DOM 元素可以在没有通知的情况下被替换，导致与插件的任何绑定都随之丢失。

在同一页面上使用相同 ID 的多个元素也是不好的做法，上述解决方案就是这种情况。元素 ID 在页面上应该是唯一的

在这种情况下，您的标题格式化程序将如下所示：

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

制表符 - 将菜单按钮添加到列 header

Tabulator - Add menu button to column header

javascript

semantic-ui

tabulator

更新

原答案