防止在列标题单击时选择 Handsontable 单元格

Posted 2023-03-22

【中文标题】防止在列标题单击时选择 Handsontable 单元格

【英文标题】：Prevent Handsontable cells from being selected on column header click

【发布时间】：2015-11-19 15:57:27

【问题描述】：

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

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

任何提示将不胜感激。谢谢。

【参考方案1】：

我认为不可能阻止这种行为。我在文档中也没有找到任何线索，也没有快速检查源代码。

但是，您可以在选中单元格后立即取消选中它们。绑定一个函数来处理单元格点击事件就可以了。你可以通过在实例化你的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');
    
);

或者，您可以编辑可操作的源代码并在 walkontableConfig 中添加在单击标题单元格时选择整列的代码段：

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);
      // 
      ...
   ,
   ...
;

【讨论】：

嗯，我得试试这个，但我想这对我不起作用，因为我已经迷上了“单元格选择”。它甚至会执行异步操作，因此在之后立即执行“取消选择”可能会产生不良行为。我一定会试一试并报告。非常感谢您的回复。

或者，您可以编辑可动手操作的源以删除该行为。请参阅我上面的编辑答案。就个人而言，我不喜欢编辑第三方库，因为这会在升级这些库时增加额外的复杂性，但在某些情况下，这可能是唯一的解决方案。

是的，我也不喜欢这样做，但是嘿，如果我能走那么远，那可能是一个不错的贡献：让它成为可选的。感谢您的提示。

哦，我想我找到了替代解决方案。我可以挂上beforeOnCellMouseDown 并在那里执行您建议的解决方案并阻止事件传播。我马上试试。

【参考方案2】：

可以使用beforeOnCellMouseDown 钩子阻止事件传播，这可以防止被点击的标题列的单元格被选中：

/**
 * @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);

非常感谢 Gustavo 的帮助！

【讨论】：

stopPropogation 在某些情况下可能是更好的选择（请参阅***.com/questions/5299740/…）

这在 0.18 中对我不起作用。事件触发正常，但调用 stopImmediatePropagation() 不会阻止单元格选择

与@Eric 相同的问题

【参考方案3】：

是的，有一个技巧，或者我们可以说选项来防止在标题单击时选择单元格。 “只需将 selectionMode 设置为单曲即可。”

试试下面的代码：

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