21

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

澄清一下：我实际上是在寻找一种允许用户编辑标题值的方法（就像普通的表格单元格一样

4

4 回答 4

23

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

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

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

于 2014-11-02T21:36:46.757 回答
4

在 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`
});
于 2013-08-21T05:20:50.090 回答
4

最初，我尝试将<input>s 放入 header <th>s 中，但 HoT 的 DOM 操作有点激进，它们很快就被删除了。

我最终在 HoT 之上绘制了s （作为和事件<input>的直接子级<body>并替换标题值。changeblur

我曾经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>

在这里拉小提琴。
注意：z-index如果您完全控制页面的 CSS，您实际上并不需要s，但我在一个高度定制的基于 Bootstrap 的主题中使用了它，在模态框内，有z-index:1050，所以我不得不给<input>s 更多来呈现它们上面`.modal-dialog'

于 2018-07-13T14:42:39.430 回答
0

一种方法是使用afterGetColHeader.

从这里复制粘贴 

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';
}
于 2018-01-11T09:43:04.743 回答