【Handsontable】fixedRowsTop 固定行の設定
Handsontable(ハンズオンテーブル)の行を固定にする方法を紹介します。
fixedRowsTop
というオプションを使用します。
以下の場合、上から1行目を固定行とします。
※固定行
とは
下にスクロールをしても指定した行は動かずに画面に表示され続けることです。
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, fixedRowsTop: 1, }); });
関連記事
【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], }); });
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
などで非表示にした行のデータを取得することができます。
関連記事
【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, }); });