Help us understand the problem. What is going on with this article?

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away