tabulatotr，如何将行中的数据添加到上下文菜单？

Question

var rowMenu = [
  
   {
      label:row.getData().fname +" " + row.getData().lname,
      disabled:true
    },
    { separator:true },
    {...

使用JS制表器，这不起作用，因为它在构建菜单时不知道行元素。 怎么解决呢？谢谢

Answer 1

您可以使用考虑单击位置数据返回菜单对象的函数，而不是在属性中使用 const

rowContextMenu

。参见示例：

//define row context menu contents
var rowMenu = [{
    label: "<i class='fas fa-user'></i> Change Name",
    action: function(e, row) {
      row.update({
        name: "Steve Bobberson"
      });
    }
  },
  {
    label: "<i class='fas fa-check-square'></i> Select Row",
    action: function(e, row) {
      row.select();
    }
  },
  {
    separator: true,
  },
  {
    label: "Admin Functions",
    menu: [{
        label: "<i class='fas fa-trash'></i> Delete Row",
        action: function(e, row) {
          row.delete();
        }
      },
      {
        label: "<i class='fas fa-ban'></i> Disabled Option",
        disabled: true,
      },
    ]
  }
]



//define some sample data
var tabledata = [{
    id: 1,
    name: "Oli Bob",
    age: "12",
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: "Mary May",
    age: "1",
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: "Christine Lobowski",
    age: "42",
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon Philips",
    age: "125",
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: "Margret Marmajuke",
    age: "16",
    col: "yellow",
    dob: "31/01/1999"
  },
];

//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
  height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data: tabledata, //assign data to table



  // use a function to generate rowMenu
  // rowContextMenu: rowMenu, 
  rowContextMenu: function(e, component) {
    var dynamic = {
      label: "dynamic: " + component.getData().name,
      action: function(e, row) {
        alert(12)
      }
    }
    return [dynamic, ...rowMenu]
  },

  layout: "fitColumns", //fit columns to width of table (optional)
  columns: [ //Define Table Columns
    {
      title: "Name",
      field: "name",
      width: 150
    },
    {
      title: "Age",
      field: "age",
      hozAlign: "left",
      formatter: "progress"
    },
    {
      title: "Favourite Color",
      field: "col"
    },
    {
      title: "Date Of Birth",
      field: "dob",
      sorter: "date",
      hozAlign: "center"
    },
  ],
});

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>