有没有办法将 headerMenu 添加到组列？

Question

列菜单是 Tabulator 的一个很棒的功能，根据文档，应该可以将它添加到 any 列中。不幸的是，我无法将一个添加到列组的标题中。我做错了还是（尚）不支持？下面的代码 sn-p 演示了该行为。除 Group1 之外的所有列都有一个菜单。

如果不支持它，我倾向于使用Tabulator - Add menu button to column header 的解决方案，但是我看不到一种方法来识别执行格式化程序时菜单所属的列组件，这对于我来说是必要的根据列的数据在动态创建的制表符和列中创建菜单项。

有什么建议吗？

<link href="https://unpkg.com/tabulator-tables@4.6.2/dist/css/tabulator.min.css" rel="stylesheet"/>

<script src="https://unpkg.com/tabulator-tables@4.6.2/dist/js/tabulator.min.js"></script>
   <div id="example-table"/>
    <script>
        var headerMenu = [
            {
                label:"<i class='fas fa-eye-slash'></i> Hide Column",
                action:function(e, column){
                    column.hide();
                }
            },
            {
                label:"<i class='fas fa-arrows-alt'></i> Move Column",
                action:function(e, column){
                    column.move("col");
                }
            }
        ]

        //initialize table
        var table = new Tabulator("#example-table", {
            height:"311px",
            layout:"fitColumns",
            columns:[
                {title:"Group1", headerMenu:headerMenu, columns:[
                    {title:"Name", field:"name", headerMenu:headerMenu},
                    {title:"Progress", field:"progress", hozAlign:"right", sorter:"number", headerMenu:headerMenu},]
                },
                {title:"Gender", field:"gender", headerMenu:headerMenu},
                {title:"Rating", field:"rating", hozAlign:"center", headerMenu:headerMenu},
                {title:"Favourite Color", field:"col", headerMenu:headerMenu}, //add menu to this column header
            ],
        });
    </script>

Answer 1

在思考了我的真正问题后，我发现在组列标题中添加一个带参数的链接就足够了。我将此解决方案添加到我的原始示例中，以确保如果有人在同一个问题中运行，则以某种方式记录此解决方案。在menuTitleFormatter 中可以很容易地自定义链接或整个标题。

<link href="https://unpkg.com/tabulator-tables@4.6.2/dist/css/tabulator.min.css" rel="stylesheet" />

<script src="https://unpkg.com/tabulator-tables@4.6.2/dist/js/tabulator.min.js"></script>
<div id="example-table" />
<script>
  var headerMenu = [{
      label: "<i class='fas fa-eye-slash'></i> Hide Column",
      action: function(e, column) {
        column.hide();
      }
    },
    {
      label: "<i class='fas fa-arrows-alt'></i> Move Column",
      action: function(e, column) {
        column.move("col");
      }
    }
  ]

  var menuTitleFormatter = function(cell, formatterParams, onRendered) {
    var span = document.createElement('span');
    span.innerHTML = `<a href="/page?param1=${formatterParams.param1}&param2=${formatterParams.param2}" target="_blank">this_is_a_link</a>`;
    var title = document.createElement("span");
    title.innerHTML = cell.getValue();
    title.appendChild(span); //add menu to title      
    return title;
  }

  var titleFormatterParams = {
    param1: 'value1',
    param2: 'value2'
  };

  //initialize table
  var table = new Tabulator("#example-table", {
    height: "311px",
    layout: "fitColumns",
    columns: [{
        title: "Group1",
        headerMenu: headerMenu,
        titleFormatter: menuTitleFormatter,
        titleFormatterParams: titleFormatterParams,
        columns: [{
            title: "Name",
            field: "name",
            headerMenu: headerMenu
          },
          {
            title: "Progress",
            field: "progress",
            hozAlign: "right",
            sorter: "number",
            headerMenu: headerMenu
          },
        ]
      },
      {
        title: "Gender",
        field: "gender",
        headerMenu: headerMenu
      },
      {
        title: "Rating",
        field: "rating",
        hozAlign: "center",
        headerMenu: headerMenu
      },
      {
        title: "Favourite Color",
        field: "col",
        headerMenu: headerMenu
      }, //add menu to this column header
    ],
  });
</script>

Answer 2

从 Tabulator 4.7 开始，使用 headerMenu 选项内置了标题菜单功能。

//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，了解有关如何使用此新功能的完整详细信息