【Handsontable】countRows 行数の取得
Handsontable(ハンズオンテーブル)で表示されている行数の取得方法について
紹介します。
countRows
countRows()
は、Handsontableの行の総数が取得できます。
$(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, }); // サンプルの場合、「4」がコンソールに出力されます。 console.log(hot.countRows()); });
autoRowSize
というプラグインを使用しても取得が可能です。
こちらは、行のインデックスになります。
※autoRowSize
はHandsontableがレンダリングされない場合は、-1
を返します。
最初の行(FirstVisibleRow)の取得
getFirstVisibleRow()
は、表示されている最初の行インデックスを取得します。
基本的には'0'が取得されますが、行を非表示とかにしている場合は、'0'以外が取得されます。
$(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, }); var autoRowSize = hot.getPlugin("autoRowSize"); // サンプルの場合、'0'がコンソールに出力されます。 console.log(autoRowSize.getFirstVisibleRow()); });
最後の行(LastVisibleRow)の取得
getFirstVisibleRow()
は、表示されている最後の行インデックスを取得します。
$(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, }); var autoRowSize = hot.getPlugin("autoRowSize"); // サンプルの場合、'3'がコンソールに出力されます。 console.log(autoRowSize.getLastVisibleRow()); });
getLastVisibleRow()
とcountRows()
で取得できる値が違うので、
注意してください。
関連記事
【Handsontable】skipColumnOnPaste ペースト スキップ
ペースト時のテクニック
Handsontable(ハンズオンテーブル)には
columns
プロパティにskipColumnOnPaste
というメンバーがいる。
型:Bool
デフォルト値:false
skipColumnOnPaste
をture
にすることで、
ペースト時に該当列はスキップしてくれるという便利なオプションがあります。
意外とかゆいところまで考えてくれています。
以下を参考にしてみてください。
たぶん、そのままコピペで動くと思います。
$(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, columns: function(col) { return { skipColumnOnPaste: col == 1, } }, }); });
関連記事
【Handsontable】contextMenu コンテキストメニュー コピー&ペースト
コンテキストメニュー
Handsontable(ハンズオンテーブル)では、コンテキストメニューに標準でコピーとペースト(貼付け)のコマンドがない。 はしくれSEとしては、Ctrl+C、Ctrl+Vで問題ないが、以外にショートカットを知らない人もいる。 なので、はしくれSEとしてはコンテキストメニューにコピーとペースト(貼付け)のコマンドを用意してあげたい。
※コンテキストメニューとは
マウスの右クリックなどで表示されるメニューのことです。
以下のようなものを作ってみました。
たぶん、そのままコピペで動くと思います。
$(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('example'); var clipboardCache = ""; var hot = new Handsontable(container, { data: data, // コンテキストメニューの使用 contextMenu: true, // コンテキストメニューの定義 contextMenu: { items: { 'copy': { name: 'コピー', }, 'paste': { name: '貼り付け', disabled: function() { return clipboardCache.length === 0; }, callback: function() { var plugin = this.getPlugin('copyPaste'); this.listen(); plugin.paste(clipboardCache); return true; } }, } }, afterCopy: function(changes) { clipboardCache = stringify(changes); }, }); }); /** * handsontable用にペーストできるよう * コピーデータを加工 */ function stringify(arr) { var r, rLen, c, cLen, str = '', val; for (r = 0, rLen = arr.length; r < rLen; r += 1) { cLen = arr[r].length; for (c = 0; c < cLen; c += 1) { if (c > 0) { str += '\t'; } val = arr[r][c]; if (typeof val === 'string') { if (val.indexOf('\n') > -1) { str += '"' + val.replace(/"/g, '""') + '"'; }else { str += val; } }else if (val === null || val === void 0) { // void 0 resolves to undefined str += ''; }else { str += val; } } if (r !== rLen - 1) { str += '\n'; } } return str; }
関連記事
【Handsontable】getValue データの取得
Handsontable(ハンズオンテーブル)のセルデータの取得方法をまとめました。
選択セルのデータやセル指定でのデータなどを取得できます。
色々と紹介していきます。
選択セルの取得(getValue)
選択セルのデータを取得する場合、getValue
を使用します。
getValue
の使用方法は、以下を参考にしてください。
$(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('example'); var hot = new Handsontable(container, { data: data, }); // hot.getValue()で選択セルの値を取得。 console.log(hot.getValue()); });
セル指定の取得(getDataAtCell)
セル指定しての値を取得する場合、getDataAtCell(row,column)
を使用します。
パラメーター | 説明 |
---|---|
row | 行インデックス。 |
column | 列インデックス。 |
getDataAtCell
の使用方法は、以下を参考にしてください。
※並び替えなどを行っている場合は、現在表示されている並びが適用されて取得されます。
$(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('example'); var hot = new Handsontable(container, { data: data, }); console.log(hot.getDataAtCell(1, 2)); });
セル範囲指定の取得(getData)
セルを範囲指定してのデータを取得する場合、getData
を使用します。
戻り値は、配列です。
パラメーター | 説明 |
---|---|
row1 | 行インデックスの始まり。 |
column1 | 列インデックス始まり。 |
row2 | 行インデックス終わり。 |
column2 | 列インデックス終わり。 |
getData
の使用方法は、以下を参考にしてください。
※並び替えなどを行っている場合は、現在表示されている並びが適用されて取得されます。
$(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('example'); var hot = new Handsontable(container, { data: data, }); console.log(hot.getData(1, 2, 3, 2)); });
指定列の全データの取得(getDataAtCol)
指定した列の全データを取得する場合、getDataAtCol
を使用します。
戻り値は、配列です。
パラメーター | 説明 |
---|---|
column | 列インデックス。 |
getDataAtCol
の使用方法は、以下を参考にしてください。
※並び替えなどを行っている場合は、現在表示されている並びが適用されて取得されます。
$(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('example'); var hot = new Handsontable(container, { data: data, }); console.log(hot.getDataAtCol(2)); });
指定行の全データの取得(getDataAtRow)
指定した行の全データを取得する場合、getDataAtRow
を使用します。
戻り値は、配列です。
パラメーター | 説明 |
---|---|
row | 行インデックス。 |
getDataAtRow
の使用方法は、以下を参考にしてください。
※並び替えなどを行っている場合は、現在表示されている並びが適用されて取得されます。
$(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('example'); var hot = new Handsontable(container, { data: data, }); console.log(hot.getDataAtRow(2)); });
関連記事
【Handsontable】使い方
Handsontable(ハンズオンテーブル)のインストール方法から簡単な使い方をまとめました。 最終的にサンプル画面ができると思います。
インストール方法
以下からソースを取得。
zipを解凍後、好きな場所に置き以下のようにhtmlなりjspに追記。
<script src="node_modules/handsontable/dist/handsontable.full.min.js"></script> <link href="node_modules/handsontable/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
必要なファイルは、2つ。
- handsontable.full.min.js
- handsontable.full.min.css
空の<div>
タグを作成
スプレッドシートを挿入したい場所に
空の<div>
タグを追加します。
この要素に "example" IDを与えましょう。
<div id="example"></div>
Handontableを作成
JavaScriptで、<div id="example">
要素へ参照を渡し、
サンプルデータを入力します。
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('example'); var hot = new Handsontable(container, { data: data, rowHeaders: true, colHeaders: true });
上記の手順が完了し、ブラウザ上で確認すると以下のような表が表示されると思います。
使い方については、説明書きがなくてもExcelに馴染みがある人であれば、直感的に使えると思います。
割とサクサク動きます。
関連記事
Handsontableとは
Handsontable(ハンズオンテーブル)とは、ブラウザ上でExcel風の操作性が可能にする、
JavaScriptで書かれたスプレッドシートのライブラリです。
MITライセンスで公開されているオープンソースライブラリです。
有償版のHandsontable Proというのもあります。
公式サイトにSampleがありますので、是非体感してみてください。
個人的な感想
スプレッドシートのライブラリは色々とあります。
例えば・・・
上記2つについて詳しい記事があったので参考にしてください。
私はその中でもHandsontableが、デザインと操作性が直感的で良いです。
私がHandsontableを開発した時にあまり欲しい情報がなかったので、公式ドキュメントを調査した結果を今後、めもに残していこうと思います。
是非、参考にしてください。