【Handsontable】selectAll セルの全選択
Handsontable（ハンズオンテーブル）のセルを全て選択する方法を紹介します。
selectAll()を使用します。
※範囲を指定しての選択は、selectCell(row, column, endRow, endColumn)
を使用します。
サンプル
$(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, }); hot.selectAll(); });
関連記事
【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, }); });
