是否可以将headerMenu添加到组列？

Question

列菜单是制表器的一项重要功能，根据文档，应该可以将其添加到any列中。不幸的是，我无法将其添加到列组的标题中。我做错了还是不支持？下面的代码段演示了这种行为。除Group1之外的所有列均具有菜单。

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

有什么建议吗？

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"/>

<script src="https://unpkg.com/[email protected]/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

考虑了我的[[real问题后，我发现将带有参数的链接添加到组列标题就足够了。我在原始示例中添加了此解决方案，以确保如果有人在同一问题中遇到问题，则以某种方式记录了该解决方案。链接或整个标题可在menuTitleFormatter中轻松自定义。

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />

<script src="https://unpkg.com/[email protected]/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>