Handsontable：添加列会移动 colHeaders（如何修复？）

Question

在上面的代码片段中，创建了一个带有钩子的 handsontable，一旦用户在最右边的列中按下 "right"（并删除最右边的空列），该钩子会自动添加一列（使用 this.alter('insert_col')）如果用户从那里按 "left" 列）。如您所见，它的问题在于，一旦以这种方式添加了一个列，colHeaders 就会向右移动，而不是留在它们的列上。这是一个错误还是我做错了什么？我该如何解决这个问题或是否有解决方法？

document.addEventListener("DOMContentLoaded", function() {

  var example = document.getElementById('example1'),
      hot = new Handsontable(example,{
    data: Handsontable.helper.createSpreadsheetData(2, 3),
    colHeaders: ["one","two","three"],
    contextMenu: true
  });

Handsontable.hooks.add('beforeKeyDown',function(event)
{
    var $right = 39, $left = 37,
        selected = this.getSelected(),
        isEditMode = this.getActiveEditor().isOpened();
    if(isEditMode) return;

    // calc dimensions
    var startColNum = selected ? (selected[1]+1) : null,
        endColNum   = selected ? (selected[3]+1) : null,
    // endColNum is not necessarily >= startColNum, it is where selection /has ended/
        rowsNum = this.countRows(),
        colsNum = this.countCols(),
        isFirstCol  = endColNum == 0,
        isLastCol   = endColNum == colsNum,
        i, noData, data = this.getData();

    // handle arrow keys
    if(isLastCol) {
        if(event.which == $right)
            this.alter('insert_col');
        if(event.which == $left && !isFirstCol) {
            noData = true;
            for(i = 0; i < rowsNum; i++)
                if(data[i][endColNum-1])
                    noData = false;
            if(noData) {
                this.alter('remove_col');
                Handsontable.Dom.stopImmediatePropagation(event);
                // don't scroll the page
                if(event.preventDefault)
                    event.preventDefault();
            }
        }
    }
});
});

<script src="https://docs.handsontable.com/pro/1.10.2/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.10.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">

<div id="example1" class="hot handsontable"></div>

Answer 1

正如 IronGeek 在评论中建议的那样，将索引作为第二个参数添加到函数 alter 中解决您的问题：

this.alter('insert_col', endColNum);

但是，我相信你说这是一个错误仍然是对的，因为 the documentation 指定如果参数 index 为 null 或 undefined :

[...] the new column will be added after the last column.

找到这个 JSFiddle 以快速测试修复。

Handsontable：添加列会移动 colHeaders（如何修复？）

Handsontable: adding a column moves colHeaders (how to fix?)

javascript

handsontable