web-dev-qa-db-ja.com

Handsontableのヘッダーテキストを編集するにはどうすればよいですか？

Handsontableの列ヘッダーのテキストを編集できるようにしたいのですが、編集可能にすることができるかどうかわかりません。ヘッダーを別の行にすることもできると思いますが、可能な限り避けたいと思います。

明確にするために：私は実際にユーザーがヘッダー値を編集できるようにする方法を探しています（通常のテーブルセルと同じように）

handsontable
18
ksigmund

これはおそらくOPには遅すぎますが、同じ答えを探している他の人は、テーブルがすでに次のようにレンダリングされた後で、列ヘッダー（および他の設定）を変更できます。

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

私が知る限り、コンストラクターで使用可能な任意の設定を渡すことができます。

21
Jason

バックボーンサンプル（ 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
Kaffee

最初は、<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>

フィドル ここ 。
注：ページのCSSを完全に制御している場合は、z-indexは実際には必要ありませんが、これを高度にカスタマイズされたBootstrapベースのテーマで、モーダル内でz-index:1050を使用して使用したため、 `.modal-の上にレンダリングするには、<input>sを追加する必要がありましたダイアログ'

2
Andrei Gheorghiu

これを行う1つの方法は、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';
}
0
kashesandr