对象数组会导致失去添加和删除列的功能 - 方便

Question

我正在读取一个对象来填充我的网格。以前，网格由数组的数组填充。当切换到对象时，我失去了添加和删除列功能，即使它存在于我的可手动初始化程序中。

这是预期的行为吗？

也在设置中添加了“allowInsertColumn”，但这不起作用。

我从上下文菜单设置中获得此功能，如下所示；

        contextMenu: {
            items: {
                row_above: {name: 'add step above'},
                row_below: {name: 'add step below'},
                col_right: {name: 'add datagroup right'},
                col_left: {name: 'add datagroup left'},
                remove_row: {name: 'remove step '},
                remove_col: {name: 'remove datagroup'}

            }
        },

Answer 1

Handsontable 的“在左/右添加列”选项通过执行

alter()

方法来工作。文档中说

alter() 方法仅当您的数据是数组的数组时才有效。

因此，如果您想允许用户添加列，您需要在

updateSettings()

上运行

columns

。

这是它的最简单形式（当然您想要添加的不仅仅是空对象）

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

Answer 2

是的。如果您想允许用户在这种情况下添加新列，您需要创建一个基于对象的菜单，如下所示

hot.updateSettings({
      contextMenu: {
    items: {
        //custom option
     "cell_validation": {
        name: 'Add new column at the end',
        callback(key, selection, clickEvent) {
            //runs custom code, I add a new object with data being random value as `columns` requires to pass something there
          // using the same value for `data` will duplicate data between columns so it has to be something new each time
          // you add a column
          columnHeaders.push({ data: `col${Math.random().toString().slice(2)}`, title: 'New column' },)
          hot.updateSettings({
            columns: columnHeaders
          })
          console.log(hot.getData())
        }
      },
        //predefined items https://handsontable.com/docs/javascript-data-grid/context-menu/
      "clear_column": {},
      /// ...etc.
    }
  },
})