防止在列 header 上选择 Handsontable 单元格单击

Question

在 Handsontable 中，当单击列 header 时，该列的所有单元格都会被选中。有办法防止这种情况发生吗？

我认为文档中没有这样的选项。我也没有在 Handsontable 库本身的源代码中的 DOM 上找到事件的注册位置。

如有任何提示，我们将不胜感激。谢谢

Answer 1

我认为无法阻止这种行为。我没有在文档中或快速检查源代码中找到任何线索。

但是，您可以在 selected 后立即删除 selected 单元格。绑定一个函数来处理单元格点击事件就可以了。您可以通过在实例化 handsontable 时注册回调来做到这一点：

$('#my_handsontable').handsontable({
   ...
   afterOnCellMouseDown: function(event, coords){
       // 'coords.row < 0' because we only want to handle clicks on the header row
       if (coords.row < 0){
           $('#my_handsontable').handsontable('deselectCell');
       }
   },
   ...
});

或者通过钩子的方式：

Handsontable.hooks.add('afterOnCellMouseDown',  function(event, coords){
    if (coords.row < 0){
        $('#my_handsontable').handsontable('deselectCell');
    }
});

或者，您可以编辑 handsontable 源代码并注释 walkontableConfig 中的代码片段 select单击 header 单元格时的列：

var walkontableConfig = {
   ...
   onCellMouseDown: function (event, coords, TD, wt) {
      ...
      // if (coords.row < 0) {
         // instance.selectCell(0, coords.col, instance.countRows() - 1, coords.col);
         // instance.selection.setSelectedHeaders(false, true);
      // }
      ...
   },
   ...
};

Answer 2

可以使用 beforeOnCellMouseDown 挂钩阻止事件传播，这会阻止被单击的 header 列的单元格被选中：

/**
 * @param {MouseEvent} event
 * @param {WalkontableCellCoords} coords
 * @param {Element} element
 */
var handleHotBeforeOnCellMouseDown = function(event, coords, element) {
  if (coords.row < 0) {
    event.stopImmediatePropagation();
  }
};

Handsontable.hooks.add('beforeOnCellMouseDown',
    handleHotBeforeOnCellMouseDown, handsontable);

非常感谢古斯塔沃的帮助！

Answer 3

是的，有一个技巧或者我们可以说选项来防止在 header 单击时选择单元格。 "Just set selectionMode to single single."

试试下面的代码：

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

var example1 = document.getElementById('example1');
var selectOption = document.getElementById('selectOption');
var settings1 = {
    data: Handsontable.helper.createSpreadsheetData(10, 10),
    width: 700,
    height: 272,
    colWidths: 75,
    rowHeights: 20,
    rowHeaders: true,
    colHeaders: true,
    selectionMode: 'single', // 'single', 'range' or 'multiple',
};
var hot1 = new Handsontable(example1, settings1);
});

防止在列 header 上选择 Handsontable 单元格单击

Prevent Handsontable cells from being selected on column header click

handsontable