Handsontable：添加列移動colHeaders（如何修復？）

在上面的代碼片段中，使用鉤子創建一個handsontable，一旦用戶在最右邊一列按下「right」，就會自動添加一列（使用this.alter('insert_col')）如果用戶從那裏按下「左」，也刪除空的最右邊的列）。正如你可能看到的那樣，它的問題在於，一旦以這種方式添加了列，colHeaders就會向右移動，而不是停留在列上。這是一個錯誤還是我做錯了什麼？我該如何解決這個問題或者是否有解決方法？Handsontable：添加列移動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>

來源

2017-07-30 YakovL

指定插入列的索引似乎可以解決問題：this.alter（'insert_col'，colsNum）;' – IronGeek

問題補充：https：//github.com/handsontable/handsontable/issues/4448 – YakovL

由於IronGeek建議的評論，添加索引作爲第二個參數的函數改變解決您的問題：

this.alter('insert_col', endColNum);

不過，我相信你仍然是對的說這是一個錯誤，因爲the documentation指定如果參數索引爲空或不明確：

新列將被添加到最後一列之後。

找到這個JSFiddle快速測試的修補程序。

來源

2017-07-31 08:34:50 fab

好的，謝謝，我將提交一份錯誤報告 – YakovL

Handsontable：添加列移動colHeaders（如何修復？）

回答

相關問題