[前][次][番号順一覧][スレッド一覧]

rails:803

From: Yoshimikan <walf443@g...>
Date: Mon, 19 Dec 2005 01:57:57 +0900
Subject: [rails:803] Re: Dynamically Updating a Table w/AJAX

よしみかんと申します。ML初投稿ですが、なにとぞよろしくお願いします。

> 前の、Rails勉強会@大阪 第1回で、ちょっと話題にした、
> 「AJAX で<table></table> の中身を動的に更新する」という
> テーマに関して、help をお願いします。

まず動的に更新するというのは、カラムのことでしょうか?あるいはセルの中(つまりテキスト部分など)でしょうか?

前半部分は自分はちょっとうまい方法を思いつきませんが、
後半であれば、Ajaxではありませんが、DHTMLで実装したことがあります。(力技ですが。

> ただ、<ul id="xxxx"> </ul> の中を、AJAX を使って更新する方法(p406)は
> 問題なく動くのですが、業務ではやはり<table></table> の中が、
> 動的に変わって欲しいものです。

大雑把に概要を述べると、
テーブルの場合でもidに規則性を持たせればよいのですから、

<table id="hoge">
<tr>
<td id="td0_0" onClick="foo(0, 0)"></td>
<td id="td0_1" onClick="foo(0, 1)"></td>
</tr>
<tr>
<td id="td1_0" onClick="foo(1, 0)"></td>
...
</tr>
</table>

などとHTMLを書いておいて、Javascriptの定義部分で、

foo(row, col){
document.getElementById('td'+row+'_'+col).innerHTML = "〜";
...
}

などとやってしまえば動的に変化させることが可能です。

前半のHTML部分は手で書いていくのは大変なので、Javascriptで動的に生成してしまうと良いと思います。

実際に動く奴は自分で書いたものですが、
http://walf443.raindrop.jp/rendezvous/
を見てみてください。

自分はJavascriptに関してそれほど知識のあるほうではないので、参考になればよいですが。。。

それにしても、これはRails MLで語られるべきことなのでしょうか?もしかするとAjax MLでやった方が良いかもしれません。

それとも、「RailsのJavascript Helper機能を使ってテーブルの動的生成をする方法」ということであれば、失礼いたしました。こちらは自分は分かりません。

とはいえ、
- セルやカラムの数の動的変化
- 各列ごとのソートやフィルタリング(Excelのオートフィルタみたいなやつ
などこの話題は興味深いので識者の方に聞いてみたい気がします。

これらに関しては毎回テーブルの中身を再描画しまくるというのしか自分には思い浮かびません。

<table id="hogehoge">...</table>

function addCol(){
  document.getElementById('hogehoge').innerHTML += "<tr><td>....</td></tr>";
}

みたいな。(上記のコードはテストしてませんのであしからず。


--
ML: rails@r...
使い方: http://QuickML.com/
Web Site: http://wiki.fdiary.net/rails/
ML Archives: http://www.fdiary.net/ml/rails/

[前][次][番号順一覧][スレッド一覧]

       801 2005-12-18 15:36 [gollum@h...         ] Dynamically Updating a Table w/AJAX     
       802 2005-12-18 16:46 ┣[moriq@m...          ]                                       
       810 2005-12-19 15:07 ┃┗[gollum@h...         ]                                     
->     803 2005-12-18 17:57 ┣[walf443@g...        ]                                       
       808 2005-12-19 01:49 ┃┗[gollum@h...         ]                                     
       804 2005-12-18 18:27 ┣[toykyo@t...         ]                                       
       807 2005-12-19 01:49 ┃┣[gollum@h...         ]                                     
       817 2005-12-21 02:03 ┃┗[moriq@m...          ]                                     
       805 2005-12-19 00:27 ┣[xml@t...            ]                                       
       812 2005-12-19 15:22 ┃┗[gollum@h...         ]                                     
       813 2005-12-19 22:14 ┃ ┗[xml@t...            ]                                   
       816 2005-12-21 01:50 ┃  ┗[gollum@h...         ]                                 
       815 2005-12-21 00:53 ┗[moriq@m...          ]                                       
       818 2005-12-21 02:31  ┗[gollum@h...         ]                                     
       850 2006-01-04 09:01   ┗[yoshi@o...          ]                                   
       851 2006-01-04 15:06    ┗[moriq@m...          ]                                 
       852 2006-01-04 15:56     ┗[moriq@m...          ]                               
       859 2006-01-06 05:14      ┗[yoshi@o...          ]