Handsontable, colWidths: 功能：如何设置适合内容的列宽？答案

【问题标题】：Handsontable, colWidths: function: how to set a column width fitting content?Handsontable, colWidths: 功能：如何设置适合内容的列宽？
【发布时间】：2017-12-20 17:57:47
【问题描述】：

我的目标是将第一列的宽度设置为某个数字，而其他列的宽度保持不变。现在我知道那个设置了

colWidths: [myValue]

实际上打破了其他列的宽度，但这似乎可以使用

colWidths: function(index) {
    if(index == 0)
        return myValue;
    return ???
}

但我想知道我应该在??? 的位置返回什么？ undefined 不起作用（好吧，它的工作方式与colWidths: [myValue] 相同——其他每一列都获得相同的默认宽度）。如何获得“内容宽度”值？

【问题讨论】：

标签： javascript css handsontable

【解决方案1】：

使用选项 manualColumnResize 而不是 colWidths 但与您的问题相同（仅定义第一列 witdh）：

manualColumnResize: [myValue]

第一列的宽度将被定义为您的值，其他列仍然是动态的。（因为 autoColumnSizeObject 默认设置为 true，当你使用 colWidths 选项时也改为 false） .

您可以找到一个工作示例here。

【讨论】：

【解决方案2】：

以防万一，我将发布我找到的另一种方法（发布在 GitHub 上）：

使用var autoColumnSize = handsontableInstance.getPlugin('autoColumnSize'); 和autoColumnSize.calculateColumnsWidth(index, 0, true); - 这个计算列index 在行0 的必要宽度，使用Math.max 是另一种选择。这是一个实现——没有遍历所有行并寻找最大值，而是一个原则证明：http://jsfiddle.net/7u1kxjLe/39/

【讨论】：

【解决方案3】：

我正在使用

modifyColWidth: function(width, col){
  if(width > 300) return 300;
}

按列号引用也可以。

modifyColWidth: function(width, col){
  if(col === 0) return 300;
}

编辑：在 HandsOnTable 实例化后你也需要这个，否则你不能设置超过 300px 的宽度。

colWidths = [];
[...Array(hot.countCols()).keys()].map(i => {
  colWidths.push(hot.getColWidth(i));
});

hot.updateSettings({
  modifyColWidth: ()=>{},
  colWidths: colWidths
});

【讨论】：