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

Question

列菜单是 Tabulator 的一大特色，根据文档，应该可以将其添加到 any 列。不幸的是，我无法将一个添加到列组的 header 中。我做错了吗？还是（还）不支持？下面的代码片段演示了该行为。除 Group1 外的所有列都有一个菜单。

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

有什么建议吗？

<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

在思考我的真正的问题后，我发现在组列标题中添加一个带参数的link就足够了。我将此解决方案添加到我的原始示例中，以确保如果有人在同一问题中运行，则以某种方式记录此解决方案。 link 或整个 header 可以很容易地在 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 开始，内置 header 菜单功能，使用 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 以了解有关如何使用此新功能的完整详细信息

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

Is there a way to add a headerMenu to a group column?

javascript

tabulator