Question

在上面的代码片段中，创建了一个handontable，其中一个钩子会在用户按下＆＃34;右边＆＃34;后自动添加一列（使用this.alter('insert_col')）。在最右边的列中（如果用户按下＆＃34;从那里按下＆＃34;也会删除最右边的空列）。正如您所看到的，它的问题在于，一旦以这种方式添加列，colHeaders就会向右移动而不是保留其列。这是一个错误还是我做错了什么？我该如何解决这个问题还是有解决方法？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

this.alter('insert_col', endColNum);

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

[...]新列将在最后一列之后添加。

找到此JSFiddle以快速测试修复程序。

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

1 个答案: