Hands on Table で 便利だと思ったやつ 殴り書き

Hands on Table

地味に組み込み関数が多いので、公式リファレンス様is神
Hands on Table 公式
あと個人的にめっちゃまとまっててよかったのでこちらも勝手に紹介
Handsontable 使い方メモ 1
Handsontable 使い方メモ 2
Handsontable 使い方メモ 3
Handsontable 使い方メモ 4

セルの値を取得

.getSelected選択されたセルの配列を返す
　　(0,2,4,5)なら(0,2)から(4,5)までが選択されているので
　　一つだけなら(0,2,0,2)とかになるよね
getValue選択されているセルの値を取得
getDataAtCell(row, col)座標でセルを指定して、そこの値を取得

セルのCSSを変える

getCellMetaセルのメタ情報を取得
this.setCellMetaObject(col, row, {className: 'qwq'})3つめの引数がメタデータのセット
　　ここでクラスが変わればCSSが変えられる

セル内にhtmlを

たとえばセルに入れる値を
<a href="javascript:void(0)" onclick="document.getElementById("ZAQ").click()">わっほい</a>
というStringにして
html上に
<input id="ZAQ" type="button" diplay:none onclick="method();">
とかってしとけば、セル上でリンクを押したらhtml上のダミーボタンが押され
そこでJavaScriptのmethodが発火されるって感じになります

条件分岐

renderer関数を使ってロジックを組めます
公式より抜粋

renderer関数

たぶん困ったらだいたいこれで解決できると思う
例

{
  title: aaa,
  data: aaa
},
{
  title: bbb,
  data: bbb,
  renderer : function (instance, td, row, column, prop, value, cellProperties) {
     Handsontable.renderers.TextRenderer.apply(this, arguments);
     // TextじゃなくてHtmlRendererにすればhtmlのリンクもできる
　　 selectedやgetDataAttCellなどを、instance.getDataAtCellなどで使う
     td.メソッドで背景色や文字色なども変えられる
     row,col,valueなどを組み合わせて、表に乗った値に応じてさまざまな変化を書ける
　　 td.innerHtml
     return td
  }
}

で？

基本的に表示する目的で使っていますが、Excelのようにクライアント側からの操作に対してのイベントを発火できるのが魅力
今回はただ表の代わりに使っています
まぁ一切ビジュアル的な解説がなく、まじで殴り書いた感じですけどｗ
地味にこの辺便利とはいえど分かりにくいので、覚えていきたいですね