HandsOnTable

Question

データベースから検索して取得したデータを
HandsOnTableに表示させたいのですが、どこに、どのように記述すればよいのでしょうか？

[HTML.erb]

# とりあえず表示するだけ
<% @user_list.each do |user_list| %>
    <%= m_user_list.id %>
    <%= m_user_list.pass %>
    <%= m_user_list.name %>
  <% end %>

<script>
 var grid = document.getElementById('human_grid')
 var columns = [
   {title: 'ID', type: 'numeric', format: '0', validator: /^\d\d?(\.\d)?$/, allowInvalid: false, readOnly: false},
   {title: 'パスワード', type: 'text',   readOnly: true}
   {title: '名',       type: 'text',   readOnly: true},
]
 var table = new Handsontable(grid,{
   startCols: columns.length,
   startRows: 12,
   columns:columns,
   columnSorting: {
     column: 0,
     sortColumn: true,
   },
   rowHeaders: true,
   height: 360,
 });
 var timer = false;
 $(window).resize(function () {
   if (timer !== false) {
     clearTimeout(timer);
   }
   timer = setTimeout(function () {
     table.render();
   }, 100);
 });
 $('#txtKeywd').autocomplete({
   source: ['JB7626', 'JC7534', 'JA7474', 'JB7420', 'JC7584', 'JA7656', 'JB7590', 'JB7680', 'JA7182', 'JC7102'],
   minLength: 0
 });
</script>

JavaScriptのコードは自分が書いたものではありません。
JavaScriptに触ったこともありません。。。
現在はこのように表示されています。

Handsontableについて、自分でも結構調べてはみたのですが、力及ばず、よくわかりませんでした。
どなたか、よろしくお願いします。

Comments

[kei344]

回答が付いた質問の編集は慎重に行ってください。タイプミス程度なら修正する事もありますが、本文を削除するのはやめましょう。 https://teratail.com/questions/history-questions/52597 ここから過去の投稿を確認できるので、それを使って記事を復元してください。

[maonmyo]

修正しました。失礼しました。

[退会済みユーザー]

　/// に変更する直前のものに復元しましょう

[WanOOOOOO]

悪気があってやったことではないようなので下げた評価を取り下げます。少し前に全部質問を消していった人がいたのでまたかと思ったのです。

[maonmyo]

xa051さん＞＞「使いまわす」というのは、「関連した質問だから過去の質問に追記する」ことでしょうか？だとすれば失礼しました。

[maonmyo]

WanOOOOOOさん＞＞本当に失礼しました。

[退会済みユーザー]

消す直前の質問と全く違ったので誤解でした。　消す直前に戻すべきですが。

Answer 1

大体以下のような流れでの実装になると思います

１． gem 'active_model_serializers'等を用いて、user_listのデータをjson（Hash）形式にし、jsに.erb拡張子をつけて、<%= %>をjsに埋め込み、データをjsへ受け渡す
1(ex). もしくはgem 'gon'を用いてデータをjsに受け渡す

1. Handsontableの

new Handsontable(grid, {data: data});

のdataにRailsから引っ張ってきたjsonデータを入れる

どちらにせよ、RailsからデータをHashの形でjsに渡し、HandsontableのデータにそのHashを使うという形になると思います(･`ω´･)

参考 http://qiita.com/opengl-8080/items/ac19deec388c357cd498

Comments

[maonmyo]

回答ありがとうございます！

導入の段階で自分は関わっていなくて、
いきなり「Handsontable使ってね！」と言われて困っていました。。。

教えて頂いた通り
new Handsontable(grid, {data: data});　　←この　「data: data」を

上のコードでいう　rowHeaders: true,　の辺りに突っ込み

var data = [["", "", "", "", "",""],];
をとすれば、出来ました！