blog.cori95.net

うーん、それにしてもJavascriptの進化は凄いですなぁ。
「XMLをJSONデータに変換するJavascriptライブラリ - スピリッツオブゼロ@blog」で、サーバ上のXMLファイルをJavaScript のオブジェクト（配列・連想配列）に変換するクラスのライブラリを見つけた。
配布元は、ここ。

なわけでこれをとりあえず使ってみる。
これ使うとcgiとかナシでもXMLから表を組んで動的にソートとかできちゃうっすな。
xslを切り替えるのとかより個人的にわかりやすそうだし。

とりあえず、UEFA Champions League FreaksのStatisticsのページがまさにそんな感じで作ってあったのでやってみる。

（以下、よくわかってないので参考になるかは不明。自分のメモ的に）

XMLをこんな感じで吐き出すようにとりあえず変更。

<?xml version="1.0" encoding="utf-8"?>
<statistics>
	<category>
		<category_name>total</category_name>
		<teams>
			<team>
				<id />
				<link />
				<name />
				<match />
				<win>勝利数</win>
				<win_ratio>勝率</win_ratio>
				<draw>引き分け数</draw>
				<lose>負け数</lose>
				<goal>得点</goal>
				<goal_ratio>1試合平均の得点</goal_ratio>
				<allow>失点</allow>
				<allow_ratio>1試合平均の失点</allow_ratio>
				<point>勝ち点</point>
				<point_ratio>1試合平均の勝ち点</point_ratio>
			</team>
			<team>
				<id>8</id>
				<link>/cl/2005/team/team8.html</link>
				<name>バイエルン・ミュンヘン</name>
				<match>2</match>
				<win>2</win>
				<win_ratio>1.000</win_ratio>
				<draw>0</draw>
				<lose>0</lose>
				<goal>2</goal>
				<goal_ratio>1.000</goal_ratio>
				<allow>0</allow>
				<allow_ratio>0.000</allow_ratio>
				<point>6</point>
				<point_ratio>3.000</point_ratio>
			</team>
		</teams>
	</category>
</statistics>

XML読み込み。

// ------- Read Data.
var url = "stats.xml";
var xml = new JKL.ParseXML(url);
var data = xml.parse();

で、とりあえずやろうとしてるのは
・対象試合の指定（全試合、ホームゲーム、アウェイゲーム）
・ソート項目の指定
でソートするだけ。

なわけで、メインはこんな感じ。

var StatsTable = Class.create();
StatsTable.prototype = {
	initialize : function () {},
	draw_table_stats : function (obj) {
		// 入力処理
		sel_mode = $F('sel_category') - 1;
		sort_key = $F('sort_column');

		// データソート
		var shelf = new TeamShelf();
		var sel_data = all_data[sel_mode].teams.team;
		for(var ind in sel_data){
			if(ind>0) shelf.appendTeam(new Team(sel_data[ind]));
		}
		shelf.sortData(sort_key);

		// 結果出力
		～～
		～～
		$('area_stats_table').innerHTML = output_table;
	}
}

ちなみに、「prototype.js でデザインパターン - Iterator」なんて記事を見つけたのでIteratorを実装してみた。作ったクラスは、完全に上記URLの真似でTeam, TeamShelf, TeamShelfIterator。
これだけで終了。　→（これ）

凄い簡単だし、並び替えのときロードしないから見てる人にもやさしいのでいい感じ。
ただ、これって動かない環境とかありそうな気もするけど。
あと検索にひっかかんなくなるぁこのページ、本文に何も書いてないな、なにげに。

ちなみに、ソート項目コンボボックスを無理に生成したけど、これもホントはもっと上手くかけるというかライブラリとかありそう。
まぁ今日のところはjkl-parsexml.jsを使ってみただけだし、動いてるからいいや。おいおいで。