はしくれSEめも

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

js

【Handsontable】setDataAtCell データの設定

セル指定しての値を設定する場合、`setDataAtCell(row, column, value)`を使用します。

【Handsontable】currentHeaderClassName カレントヘッダーのスタイル設定

Handsontable(ハンズオンテーブル)のカレントヘッダー(選択ヘッダー)のスタイルを変更する方法を紹介します。 カレントヘッダー(選択ヘッダー)のスタイルを変更するには、 `currentHeaderClassName`というオプションを使用します。

【Handsontable】currentColClassName カレント列のスタイル設定

Handsontable(ハンズオンテーブル)のカレント列(選択列)のスタイルを変更する方法を紹介します。 カレント列(選択列)のスタイルを変更するには、 `currentColClassName`というオプションを使用します。

【Handsontable】currentRowClassName カレント行のスタイル設定

Handsontable(ハンズオンテーブル)のカレント行(選択行)のスタイルを変更する方法を紹介します。 カレント行(選択行)のスタイルを変更するには、 `currentRowClassName `というオプションを使用します。

【Handsontable】fixedRowsTop 固定行の設定

Handsontable(ハンズオンテーブル)の行を固定にする方法を紹介します。 fixedRowsTopというオプションを使用します。 以下の場合、上から1行目を固定行とします。 ※固定行とは 下にスクロールをしても指定した行は動かずに画面に表示され続けることです。 …

【Handsontable】selectAll セルの全選択

Handsontable(ハンズオンテーブル)のセルを全て選択する方法を紹介します。 selectAll()を使用します。 ※範囲を指定しての選択は、selectCell(row, column, endRow, endColumn) を使用します。 サンプル $(function(){ var data = [ ["", "Ford", "Tesla",…

【Handsontable】fixedColumnsLeft 固定列の設定

Handsontable(ハンズオンテーブル)の列を固定にする方法を紹介します。 fixedColumnsLeftというオプションを使用します。 以下の場合、左から3列目を固定列とします。 ※固定列とは 右にスクロールをしても指定した列は動かずに画面に表示され続けることで…

【Handsontable】hiddenRows 行を非表示にする

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

【Handsontable】AutoRowSize 高さ サイズ 取得

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

【Handsontable】AutoColumnSize 幅 サイズ 取得

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

【Handsontable】AutoColumnSize 列 幅 自動調整

Handsontable(ハンズオンテーブル)では、列の幅サイズを自動で調整してくれる オプションが存在します。 AutoColumnSizeというオプションを使用します。 注意 列の幅サイズを自動調整するためには、 すべてのセルの幅を計算する必要があるため、 テーブル…

【Handsontable】AutoRowSize 行 高さ 自動調整

Handsontable(ハンズオンテーブル)では、行の高さサイズを自動で調整してくれる オプションが存在します。 AutoRowSizeというオプションを使用します。 注意 行の高さサイズを自動調整するためには、 すべてのセルの高さを計算する必要があるため、 テーブ…

【Handsontable】afterChangeよりもbeforeChange

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

【Handsontable】source 引数の定義

Handsontable(ハンズオンテーブル)でよくbeforeChangeなどイベントのパラメータにsourceがあります。 sourceは、何のアクション(イベント)でトリガーとなったかを判定する際に使用できます。 ただ、何が入ってくるのかいつも疑問に思います。 そこで一覧…

【Handsontable】readOnly 読取専用

Handsontable(ハンズオンテーブル)では、簡単にセルを読取専用にできます。 本日は、そのやり方についてご紹介します。

【Handsontable】hiddenColumns 列を非表示にする

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

【Handsontable】autoColumnSize 列数の取得

Handsontable(ハンズオンテーブル)で表示されている最初(min)の列(Column)と最後(max)の列(Column)の値を取得します。 autoColumnSizeというプラグインを使用します。 ※ autoColumnSizeはHandsontableがレンダリングされない場合は、-1を返します。 以下を…

【Handsontable】countRows 行数の取得

Handsontable(ハンズオンテーブル)で表示されている行数の取得方法について 紹介します。

【Handsontable】skipColumnOnPaste ペースト スキップ

ペースト時のテクニック Handsontable(ハンズオンテーブル)には columnsプロパティにskipColumnOnPasteというメンバーがいる。 型:Bool デフォルト値:false skipColumnOnPasteをtureにすることで、 ペースト時に該当列はスキップしてくれるという便利な…

【Handsontable】contextMenu コンテキストメニュー コピー&ペースト

コンテキストメニュー Handsontable(ハンズオンテーブル)では、コンテキストメニューに標準でコピーとペースト(貼付け)のコマンドがない。 はしくれSEとしては、Ctrl+C、Ctrl+Vで問題ないが、以外にショートカットを知らない人もいる。 なので、はしくれ…

【Handsontable】getValue データの取得

Handsontable(ハンズオンテーブル)のセルデータの取得方法をまとめました。 選択セルのデータやセル指定でのデータなどを取得できます。 色々と紹介していきます。

【Handsontable】使い方

Handsontable(ハンズオンテーブル)のインストール方法から簡単な使い方をまとめました。 最終的にサンプル画面ができると思います。 インストール方法 以下からソースを取得。 Download | Handsontable zipを解凍後、好きな場所に置き以下のようにhtmlなり…

Handsontableとは

Handsontable(ハンズオンテーブル)とは、ブラウザ上でExcel風の操作性が可能にする、 JavaScriptで書かれたスプレッドシートのライブラリです。 MITライセンスで公開されているオープンソースライブラリです。 有償版のHandsontable Proというのもあります…