【Javascript】携帯でAjaxな動的テーブル2

携帯でAjaxな動的テーブル2

---

1: 使いまわし易くする
2: サンプル
3: 読み込むデータファイル
4: ソース(メイン)
5: ソース(テーブル構築用)

前回は、スマートフォン向けの「Ajaxな動的テーブル書き換え」を試してみました。 今回は、それを少し使い易く、簡単なチューンナップをしてみます。

使いまわし易くする

X01HTでサンプルを表示

前回は、とりあえずスマートフォンで動作させるためにDOM0を使って過去のソースを書き直しました。 今回は、もう少しだけ使い易くしてみます。

ポイントは、テーブル構築用のスクリプトをクラス化したことです。 テーブル構築用のソースの中に、散らばっていたグローバルな変数や関数をオブジェクトにまとめてしまします。 これで、このライブラリ以外のスクリプトと組み合わせたときに、グローバルな変数や関数と衝突する危険性が少なくなります。

参考までに、このスクリプトのグローバルなメンバは、HTMLファイル内も含めて次の通りです。
サンプルHTML test1.htm

• グラフ用画像URL timg1
• Jslb_WriteTable ショートカット jlwt
• インスタンス用配列 wt
• 送信関数 setData

ライブラリ jslb_writetable_dom0_012.js (UPDATE 2007.1.3)

• クラス Jslb_WriteTable

ライブラリ jslb_ajax0511_c.js

• ブラウザ判定関数 chkAjaBrowser
• XHR生成 createHttpRequest
• 送受信関数 sendRequest

*2006.1.3 複数のテーブルでも扱いやすくするためjslb_writetable_dom0_012.jsにUPDATE

サンプル

では、サンプルを見てみましょう。今回は、本当に枯れ切ったコードですから、 X01HT以外のブラウザでも動きますので、サンプルページで試してみます。

「算数 | 国語 | 理科 | 社会 | 英語 」のリンクにタップまたはカーソルで触れてみてください。今回のサンプルで、グラフの画像が異なるのは インスタンス生成時に、引数としてグラフ画像を渡しているからです。また、表の色が前回と違うのは、CSSで該当セルの指定を変更したからです。 (CSSの変更場所は次ページ)。また、前回使っていたremove処置を省略することで、書き換え速度も速くなりました。

サンプル→test1.htm

読み込むデータファイル

今回も前回と同じJSON形式のファイルをそのまま利用しました。
データファイル(sansu.txt、kokugo.txt、etc...)の中身
＊JSONの配列形式で用意します。

[
	[ "名前" , "国語" ] ,
	[ "山田" , "12" ] ,
	[ "田中" , "28" ] ,
	[ "中山" , "56" ] ,
	[ "山本" , "98" ] ,
	[ "本井" , "12" ] ,
	[ "井上" , "18" ] ,
	[ "上山" , "48" ] 
]