如何编辑 Handsontable 的标题文本？
Posted
技术标签:
【中文标题】如何编辑 Handsontable 的标题文本？【英文标题】：How do I edit the header text of a Handsontable? 【发布时间】：2013-08-23 07:03:57 【问题描述】：我希望能够在 Handsontable 中编辑列标题的文本，但我似乎无法弄清楚是否可以使它们可编辑。我想我可以让标题只是另一行，但如果可能的话，我想避免这种情况。
澄清一下：我实际上是在寻找一种允许用户编辑标题值的方法（就像普通的表格单元格一样
【问题讨论】：
你为什么要避免让它们成为正常细胞？您应该能够使用 CSS 为它们设置任何您喜欢的样式，以便它们看起来与其他单元格不同。 @alxndr，是的，看起来这就是这样做的方式。也就是说，如果支持编辑标题内容会很好。 【参考方案1】：这对于 OP 来说可能为时已晚，但其他任何寻找相同答案的人都可以在表格已经呈现以下内容后更改列标题（以及其他设置）：
var hot = $container.data('handsontable');
hot.updateSettings(
colHeaders: ['A','B','C']
);
据我所知，您可以传递构造函数中可用的任何设置。
【讨论】：
我相信这只提供了以编程方式完成我想要做的事情的能力，而不是让单元格本身可以直接编辑。 几天前需要这个，所以我想出了一个允许在点击时修改标题的功能。我想它可以改进（启用键盘导航到下一个单元格？）但我需要的只是基本的，所以这就是我编码的，我想我会分享。 所以@AndreiGheorghiu，您的解决方案有效吗？我没看到你把代码贴在哪里？【参考方案2】：在 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`
);
【讨论】：
感谢您的回答。我实际上是在寻找一种方法来允许用户编辑标题值（就像他们将一个普通的表格单元格一样）。【参考方案3】：最初，我尝试将<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' 上方
【讨论】：
【参考方案4】：一种方法是使用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';
【讨论】：
以上是关于如何编辑 Handsontable 的标题文本？的主要内容，如果未能解决你的问题，请参考以下文章
使用 Handsontable 时如何强制选定单元格进入编辑模式？
如何在handsontable上过滤时仅在下拉菜单上显示不包含HTML内容的文本？