はしくれSEめも

SEに必要情報をめも程度に残していこうと思っています。

【Handsontable】行を非表示にする

handsontable

Handsontable(ハンズオンテーブル)で行の非表示について紹介します。
HandsontableとHandsontable Proとでやり方が違うので注意してください。
※Handsontable Proは、どちらのやり方でも非表示にできます。

以下を参考にしてみてください。
たぶん、そのままコピペで動くと思います。

Handsontableの場合

Handsontableの公式ドキュメントを確認すると、
Pro用のプラグインがあり、内容を確認すると高さサイズを0pxにしているもよう。
なので、Proでなくても非表示は可能でした。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,
    rowHeights: [50, 0, 30, 30, 30],
  });
});

2行目が非表示になったと思います。
高さを0pxにしているだけなので、データの取得時によく使う getDataAtCellなどで非表示にした行のデータを取得することができます。

Handsontable Proの場合

Handsontable Proにはプラグインが用意されています。hiddenRowsです。
hiddenRowsプラグインは、指定した行を非表示にすることができます。

今回は、動的に非表示にしたい場合を紹介します。
hiddenRowsプラグインhideRowを使用します。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,
    hiddenRows: true,
    hiddenRows: {
      rows: [1]
    },
  });

  var hiddenRows = hot.getPlugin("hiddenRows");

  hiddenRows. showRow(1);         // 表示
  hiddenRows.hideRow(2, 3);       // 非表示
  hiddenRows.hideRows([2, 3])   // 非表示(配列)
  hot.render();
});

行を非表示にしても、データの取得時によく使う
getDataAtCellなどで非表示にした行のデータを取得することができます。

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

【Handsontable】AutoRowSize 高さ サイズ 取得

handsontable

Handsontable(ハンズオンテーブル)では、色々なプラグインが用意されています。 AutoRowSizeというプラグインgetRowHeightを使用して、行の高さサイズを取得します。

getRowHeightとは

計算された行の高さサイズを取得します。

パラメーター 説明
row 行インデックス。

使い方

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,
    autoRowSize: true,
  });

  const plugin = hot.getPlugin('autoRowSize');
  
  plugin. getRowHeight(3);

});

注意

行の高さサイズを自動調整するためには、
すべてのセルの高さを計算する必要があるため、
テーブル全体のパフォーマンスが低下する可能性があるそうです。
パフォーマンスに問題がある場合は、AutoRowSize機能をオフにし、
行の高さサイズを手動で宣言した方が良いそうです。

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

【Handsontable】AutoColumnSize 幅 サイズ 取得

handsontable

Handsontable(ハンズオンテーブル)では、色々なプラグインが用意されています。 AutoColumnSizeというプラグインgetColumnWidthを使用して、列の幅サイズを取得します。

getColumnWidthとは

計算された列の幅サイズを取得します。

パラメーター 説明
column 列インデックス。

使い方

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,
    autoColumnSize: true,
  });

  const plugin = hot.getPlugin('autoColumnSize');
  
  plugin.getColumnWidth(3);

});

注意

列の幅サイズを自動調整するためには、
すべてのセルの幅を計算する必要があるため、
テーブル全体のパフォーマンスが低下する可能性があるそうです。
パフォーマンスに問題がある場合は、AutoColumnSize機能をオフにし、
列の幅サイズを手動で宣言した方が良いそうです。

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

【Handsontable】AutoColumnSize

handsontable

Handsontable(ハンズオンテーブル)では、列の幅サイズを自動で調整してくれる
オプションが存在します。
AutoColumnSizeというオプションを使用します。

注意

列の幅サイズを自動調整するためには、
すべてのセルの幅を計算する必要があるため、
テーブル全体のパフォーマンスが低下する可能性があるそうです。
パフォーマンスに問題がある場合は、AutoColumnSize機能をオフにし、
列の幅を手動で宣言した方が良いそうです。


使い方は、以下の通りです。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,
    autoColumnSize: true,
  });
});

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

【Handsontable】AutoRowSize

handsontable

Handsontable(ハンズオンテーブル)では、行の高さサイズを自動で調整してくれる
オプションが存在します。
AutoRowSizeというオプションを使用します。

注意

行の高さサイズを自動調整するためには、
すべてのセルの高さを計算する必要があるため、
テーブル全体のパフォーマンスが低下する可能性があるそうです。
パフォーマンスに問題がある場合は、AutoRowSize機能をオフにし、
行の高さを手動で宣言した方が良いそうです。


使い方は、以下の通りです。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,
    autoRowSize: true,
  });
});

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

【Handsontable】afterChangeよりもbeforeChange

handsontable

入力したデータを加工や変換したり、入力をキャンセルしたい場合があると思います。
Handsontable(ハンズオンテーブル)では、おそらくbeforeChangeafterChange
イベントを使用すると思います。
私的にはbeforeChangeをおすすめします。

理由:afterChangeの場合、2回描画処理が行われてしまうからです。遅いです。
beforeChangeは、1回なので早いです。

それでは、beforeChangeの使い方をご紹介します。

入力データの加工や変換

以下の処理は、入力した値を必ず「OK」に書き変える処理です。 changesを書き変えることで、入力値の加工や変換が可能です。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,

    beforeChange: function(changes, source) {
      if (source == 'edit' ||
          source == 'CopyPaste.paste' ||
          source == 'Autofill.fill') {
        for (var i = 0; i < changes.length; i++) {
          var row = changes[i][0];
          var col = changes[i][1];
          var oldValue = changes[i][2];
          var newValue = changes[i][3];

          console.log('row:' + row);
          console.log('col:' + col);
          console.log('oldValue:' + oldValue);
          console.log('newValue:' + newValue);

          // 入力値の変換
          changes[i][3] = 'OK';
        }
      }
    }
  });
});

changes:[row, col, oldVal, newVal]

  1. row:変更した行
  2. col:変更した列
  3. oldVal:変更前の値
  4. newVal:変更後の値

source:以下のリンクを参照ください。

coogi-memo.hatenablog.com

入力データキャンセル

入力したデータをキャンセルすることも容易にできます。
以下の処理は、'edit'以外の場合に入力したデータをキャンセルする処理です。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,

    beforeChange: function(changes, source) {
      if (source != 'edit') {
        return false;
      }
    }
  });
});

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

【Handsontable】source 引数の定義

handsontable

Handsontable(ハンズオンテーブル)でよくbeforeChangeなどイベントのパラメータにsourceがあります。
sourceは、何のアクション(イベント)でトリガーとなったかを判定する際に使用できます。

ただ、何が入ってくるのかいつも疑問に思います。
そこで一覧にまとめました。
文字列で判定します。

auto

Handsontableによってトリガーされたアクションとその理由は、Handsontableに適用された設定に直接関連しています。たとえば、0より大きいafterCreateRow場合にminSpareRowsは、これで解雇されます。

edit

データが変更された後(例えば、編集やsetData*メソッドの使用後)にHandsontableによってトリガーされるアクション。

loadData

loadDataまたはupdateSettings({data: myData})(dataプロパティ付き)メソッドが呼び出された後にHandsontableによってトリガーされるアクション。

populateFromArray

データの入力を要求した後にHandsontableによってトリガーされるアクション。

spliceCol

列データのスプライスが完了した後にHandsontableによってトリガーされるアクション。

spliceRow

行のデータスプライシングが完了した後にHandsontableによってトリガーされるアクション。

timeValidate

時間バリデータが呼び出された後にHandsontableによってトリガされるアクション(たとえば編集後)。

dateValidate

日付バリデータが呼び出された後にHandsontableによってトリガされるアクション(たとえば編集後)。

validateCells

検証プロセスが起動された後でHandsontableによってトリガーされるアクション。

Autofill.fill

オートフィルプラグインによってトリガーされるアクション。

ContextMenu.clearColumns

"Clear column"がクリックされた後にContextMenuプラグインによってトリガーされるアクション。

ContextMenu.columnLeft

「左の列を挿入」がクリックされた後にContextMenuプラグインによってトリガーされるアクション。

ContextMenu.columnRight

「右の列を挿入」がクリックされた後にContextMenuプラグインによってトリガーされるアクション。

ContextMenu.removeColumn

"Remove column"がクリックされた後にContextMenuプラグインによってトリガーされるアクション。

ContextMenu.removeRow

"Remove Row"がクリックされた後にContextMenuプラグインによってトリガーされるアクション。

ContextMenu.rowAbove

「Insert row above」がクリックされた後にContextMenuプラグインによってトリガーされるアクション。

ContextMenu.rowBelow

「下の行を挿入」がクリックされた後にContextMenuプラグインによってトリガーされるアクション。

CopyPaste.paste

値が貼り付けられた後にCopyPasteプラグインによってトリガーされるアクション。

ObserveChanges.change

変更が検出された後にObserveChangesプラグインによってトリガーされるアクション。

UndoRedo.redo

変更をやり直した後、UndoRedoプラグインによってトリガーされるアクション。

UndoRedo.undo

変更が取り消された後、UndoRedoプラグインによってトリガーされるアクション。

sourceを使用したサンプル

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  
  var container = document.getElementById('handsonTable');
  
  var hot = new Handsontable(container, {
    data: data,

    beforeChange: function(changes, source) {
      if (source == 'edit' ||
          source == 'CopyPaste.paste' ||
          source == 'Autofill.fill') {

        console.log('編集');
      }else {
        console.log('source:' + source);
      }
    }
  });
});

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com