handontable Angular 中的禁用选项

Question

我正在使用一个示例来使用 HandsOnTable 创建表格，这是我的核心

这是 html 标签

  <hot-table
  [data]="dataset"
  [settings]="hotSettings"
  [hotId]="'my-hot-table'"
></hot-table>

但结果不是我所期望的，因为与列相关的所有上下文菜单选项都被禁用为附加的，所以缺少什么？

我希望启用上下文菜单中的所有选项

Answer 1

您没有分享您使用的数据集类型，但似乎您正在定义一个对象数据。这使得列更改选项被禁用。如果您在设置中定义“列”选项，也会发生同样的情况。

如果您希望拥有对象数据并允许用户更改列数，您需要创建一个自定义上下文菜单选项，该选项使用新的列集执行

updateSettings()

方法。会是这样的

var cols = [{
  data: 'id'
}, {
  data: 'name'
}, {
  data: 'surname'
}];

var myData = [{
    id: 1,
    name: 'Adam',
    surname: 'Smith'
  }, {
    id: 2,
    name: 'Eve',
    surname: 'Smith'
  }],
  example = document.getElementById('example1'),
  hot = new Handsontable(example, {
    data: myData,
    rowHeaders: true,
    colHeaders: true,
    columns: cols
  });

document.querySelector('.add').addEventListener('click', function() {
  cols.push({});
  hot.updateSettings({
    columns: cols
  })
})