Question

我希望能够在Handsontable中编辑列标题的文本，但我似乎无法弄清楚是否可以使它们可编辑。我想我可以把标题放在另一行，但如果可能的话，我想避免这样做。

澄清一下：我实际上正在寻找一种允许用户编辑标题值的方法（因为它们是正常的表格单元格

Answer 1

对于OP来说这可能为时已晚，但是在使用以下内容呈现表后，任何其他寻找相同答案的人都可以更改列标题（以及其他设置）：

var hot = $container.data('handsontable');
hot.updateSettings({
  colHeaders: ['A','B','C']
});

据我所知，你可以传递构造函数中可用的任何设置。

Answer 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`
});

Answer 3

最初，我尝试将<input>放入标头<th>中，但是HoT的DOM操作非常激进，因此很快就将其删除。

我最终在HoT上方绘制了<input>（作为<body>的直接子代，并替换了change和blur事件上的标头值。

我使用afterOnCellMouseDown创建了<input>：

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>多一些，以使其在`.modal-dialog'之上

Answer 4

这样做的一种方法是使用c。

从here

粘贴的复制件

afterGetColHeader

如何编辑Handsontable的标题文本？

4 个答案: