Есть ли способ добавить headerMenu в столбец группы? - PullRequest
Новая
       13

Есть ли способ добавить headerMenu в столбец группы?

2 голосов
/ 18 апреля 2020

Меню столбцов - отличная особенность Tabulator, и согласно документации, можно добавить их в любой столбец. К сожалению, я не могу добавить его в заголовок группы столбцов. Я делаю это неправильно или это (пока) не поддерживается? Фрагмент кода ниже демонстрирует поведение. Все столбцы, кроме Group1, получают меню.

Если оно не поддерживается, я склонен использовать решение из Tabulator - Добавить кнопку меню в заголовок столбца , но там я не вижу способа определить компонент столбца, к которому будет принадлежать меню при выполнении средства форматирования, что было бы необходимо, так как мне нужно было бы создавать пункты меню в динамически создаваемых табуляторах и столбцах в зависимости от данных столбца.

Есть предложения? 

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

1 Ответ

0 голосов
/ 06 мая 2020

Подумав о моей реальной проблеме, я обнаружил, что достаточно добавить ссылку с параметрами в заголовок столбца группы. Я добавил это решение в свой исходный пример, чтобы убедиться, что это решение каким-то образом задокументировано, если кто-то задает тот же вопрос. Ссылку или весь заголовок можно очень легко настроить в 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>
...