我希望能够在 Handsontable 中编辑列标题的文本，但我似乎无法弄清楚是否可以使它们可编辑。我想我可以让标题只是另一行，但如果可能的话，我想避免这种情况。
澄清一下：我实际上是在寻找一种允许用户编辑标题值的方法（就像普通的表格单元格一样
【问题讨论】：
标签： handsontable
这对于 OP 来说可能为时已晚，但其他任何寻找相同答案的人都可以在表格已经呈现以下内容后更改列标题（以及其他设置）：
var hot = $container.data('handsontable');
hot.updateSettings({
colHeaders: ['A','B','C']
});
据我所知，您可以传递构造函数中可用的任何设置。
【讨论】：
在 Backbone 示例 (http://handsontable.com/demo/backbone.html) 中，它们可能会显示您正在搜索的内容：
var $container = $("#example1");
$container.handsontable({
data: cars,
dataSchema: makeCar,
contextMenu: true,
columns: [
attr("make"),
attr("model"),
attr("year")
],
colHeaders: ["Make", "Model", "Year"]
//minSpareRows: 1 //see notes on the left for `minSpareRows`
});
【讨论】：
最初，我尝试将<input>s 放在标题<th>s 中，但HoT 的DOM 操作有点激进，很快就会被删除。
我最终在 HoT 上方绘制了 <input>s（作为 <body> 的直接子代，并替换了 change 和 blur 事件上的标头值。
我使用afterOnCellMouseDown 来创建<input>s：
new Handsontable(
document.getElementById('example'), {
rowHeaders: true,
colHeaders: true,
minRows: 10,
minCols: 10,
afterOnCellMouseDown: function(event, coords, th) {
if (coords.row === -1 || coords.col === -1) {
let instance = this,
isCol = coords.row === -1,
input = document.createElement('input'),
rect = th.getBoundingClientRect(),
addListeners = (events, headers, index) => {
events.split(' ').forEach(e => {
input.addEventListener(e, () => {
headers[index] = input.value;
instance.updateSettings(isCol ? {
colHeaders: headers
} : {
rowHeaders: headers
});
setTimeout(() => {
if (input.parentNode)
input.parentNode.removeChild(input)
});
})
})
},
appendInput = () => {
input.setAttribute('type', 'text');
input.style.cssText = '' +
'position:absolute;' +
'left:' + rect.left + 'px;' +
'top:' + rect.top + 'px;' +
'width:' + (rect.width - 4) + 'px;' +
'height:' + (rect.height - 4) + 'px;' +
'z-index:1060;';
document.body.appendChild(input);
};
input.value = th.querySelector(
isCol ? '.colHeader' : '.rowHeader'
).innerText;
appendInput();
setTimeout(() => {
input.select();
addListeners('change blur', instance[
isCol ? 'getColHeader' : 'getRowHeader'
](), coords[isCol ? 'col' : 'row']);
});
}
}
}
)<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/5.0.0/handsontable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/5.0.0/handsontable.min.css" rel="stylesheet" />
<div id="example"></div>小提琴here。
注意：如果您完全控制页面的 CSS，则实际上并不需要 z-index，但我在高度自定义的情况下使用了它基于 Bootstrap 的主题，在模态框内，具有 z-index:1050，所以我不得不给 <input>s 更多以将它们呈现在 `.modal-dialog' 上方
【讨论】：
一种方法是使用afterGetColHeader。
从here复制粘贴
afterGetColHeader: function (col, TH) {
// nothing for first column
if (col == -1) {
return;
}
var instance = this;
// create input element
var input = document.createElement('input');
input.type = 'text';
input.value = TH.firstChild.textContent;
TH.appendChild(input);
Handsontable.Dom.addEvent(input, 'change', function (e){
var headers = instance.getColHeader();
headers[col] = input.value;
instance.updateSettings({
colHeaders: headers
});
});
TH.style.position = 'relative';
TH.firstChild.style.display = 'none';
}
【讨论】：