【Handsontable】fixedColumnsLeft 固定列の設定
Handsontable（ハンズオンテーブル）の列を固定にする方法を紹介します。
fixedColumnsLeftというオプションを使用します。
以下の場合、左から3列目を固定列とします。
※固定列とは
右にスクロールをしても指定した列は動かずに画面に表示され続けることです。
Excelで言うところの「ウィンドウ枠の固定」です。
サンプル
$(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, fixedColumnsLeft: 3, }); });
関連記事
【Handsontable】hiddenRows 行を非表示にする
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], }); });
２行目が非表示になったと思います。
高さを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などで非表示にした行のデータを取得することができます。
関連記事
【Handsontable】AutoRowSize 高さ サイズ 取得
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機能をオフにし、
行の高さサイズを手動で宣言した方が良いそうです。
関連記事
【Handsontable】AutoColumnSize 幅 サイズ 取得
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機能をオフにし、
列の幅サイズを手動で宣言した方が良いそうです。
関連記事
【Handsontable】AutoColumnSize 列 幅 自動調整
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, }); });
関連記事
【Handsontable】AutoRowSize 行 高さ 自動調整
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, }); });
関連記事
【Handsontable】afterChangeよりもbeforeChange
入力した値を加工したり、入力をキャンセルしたい場合があると思います。
Handsontable（ハンズオンテーブル）では、おそらくbeforeChangeやafterChangeのイベントを使用すると思います。
私的にはbeforeChangeをおすすめします。
理由：afterChangeの場合、2回描画処理が行われてしまうからです。遅いです。
※beforeChangeは、1回なので早いです。
それでは、beforeChangeの使い方をご紹介します。
beforeChange
以下の処理は、入力した値を必ず「OK」に書き変える処理です。
changesを書き変えることで、入力値の加工や変換が可能です。
$(function(){ // testデータ var data = [ ["", "Ford", "Tesla", "Toyota", "Honda"], ["2017", 10, 11, 12, 13], ["2018", 20, 11, 14, 13], ["2019", 30, 15, 12, 13] ]; // htmlで定義したhandsonTableのID 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'; } } } }); });
// 例
row:1
col:1
oldValue:おーけー
newValue:OK
changes：[row, col, oldVal, newVal]
row：変更した行col：変更した列oldVal：変更前の値newVal：変更後の値
source：以下のリンクを参照ください。
入力値キャンセル
入力した値をキャンセルすることも容易にできます。
以下の処理は、'edit'以外の場合に入力した値をキャンセルする処理です。
$(function(){ // testデータ var data = [ ["", "Ford", "Tesla", "Toyota", "Honda"], ["2017", 10, 11, 12, 13], ["2018", 20, 11, 14, 13], ["2019", 30, 15, 12, 13] ]; // htmlで定義したhandsonTableのID var container = document.getElementById('handsonTable'); var hot = new Handsontable(container, { data: data, beforeChange: function(changes, source) { if (source != 'edit') { // ペーストやオートフィル等の場合は、編集不可となる。 return false; } } }); });
