 |
|
| JPSpanを使ってAJAXをしよう！ |
第３回：テーブルにスクロールバーを実装する
著者：Joshua Eichorn 2005/11/16
|
|
|
前のページ 1 2 3
|
|
| スクロールバーに接続する
|
ここまでで、テーブルに行の追加と削除、そしてスクロールバーの上下イベントを実現できました。これらを組み合わせて、基本的なスクロールテーブルを作っていきましょう。
簡単にするため、データをスクロールするためのJavaScript配列を作成します。それが動いたら、JPSpanを追加します。リスト10に、そのJavaScriptを掲載します。まずテストデータを作成し、5行分の作成をしています。次に、ScrollBarクラスを作成し、実際にテーブルにスクロールするためのイベントメソッドをオーバーライドしています。
|
1 ⁄⁄ テーブルデータを配列にして生成する
2 var tableData = new Array();
3 for(var i = 0; i < 20; i++) {
4 var o = new Object();
5 o[0] = 'Row '+i;
6 o[1] = 'Other '+i;
7 tableData.push(o);
8 }
9
10 ⁄⁄ テーブルに5行分の空データを作っておく
11 var table = document.getElementById('table');
12 for(var i = 0; i < 5; i++) {
13 var row = document.createElement('tr');
14 for(var key in tableData[i]) {
15 var cell = document.createElement('td');
16 cell.appendChild(document.createTextNode(
17 tableData[i][key]));
18 row.appendChild(cell);
19 }
20 table.appendChild(row);
21 }
22
23 ⁄⁄ スクロールバーを追加する
24 var bar = new ScrollBar('bar');
25 bar.currentRow = 0;
26 bar.scrollSize = 5;
27
28 ⁄⁄ スクロールバーのonScrollDown メソッドをオーバーライドする
29 bar.onScrollDown = function() {
30 ⁄⁄ スクロールするかどうか確認する
31 if ( (this.currentRow + 1 + this.scrollSize)
32 > tableData.length) {
33 return; ⁄⁄ これ以上スクロールするデータが無い
34 }
35
36 this.currentRow += 1;
37
38 ⁄⁄ 新しい行を追加する
39 var index = this.currentRow + this.scrollSize -1;
40 var row = document.createElement('tr');
41 for(var key in tableData[index]) {
42 var cell = document.createElement('td');
43 cell.appendChild(document.createTextNode(
44 tableData[index][key]));
45 row.appendChild(cell);
46 }
47 table.appendChild(row);
48
49 ⁄⁄ １番目の行を取り除く
50 table.removeChild(
51 table.getElementsByTagName('tr').item(0));
52 }
|
リスト10：データをスクロールするためのJavaScript配列
|
JavaScriptはとてもダイナミック（動的）な言語で、実行時でもクラスメソッドをオーバーライドすることができます。その場合には、function() {}構文を使用して、オーバーライドするメンバ関数に割り当てます。
実際のスクロールはonScrollDownメソッドで行われます。次に表示させるデータがあるか確認し、なければ戻ります。次のデータがあった場合は、this.currentRowをインクリメントした後、tableData配列を元に新しい行を作成します。ただし、先ほどの例とは異なり、TD要素はcreateElement()メソッドを通じて作成されています。この理由は、ループ処理が事前にコラム数がわからない状況で行われるためです。最後に、テーブルの一番下にこの1行を加え、一番上の行から1行を削除しています。
スクロールするテーブルの仕上げとして、onScrollUp()メソッドもオーバーライドしています。このメソッドはonScrollDown()メソッドと同様ですが、一番上に行を追加し、一番下の行を削除します。
|
table.insertBefore(row,
table.getElementsByTagName('tr').item(0));
table.removeChild(table.getElementsByTagName('tr').item(this.scrollSize));
|
|
前のページ 1 2 3
|
|
|
|
|
著者プロフィール
Joshua Eichorn
Joshua Eichornは、PHPを使ったWebサイトを7年間制作してきました。彼は、非常に有名なPHPのドキュメーションツールであるphpDocumentorの制作者です。また彼は、アリゾナ州立大学のScience in Computer InformationSystems学部の学士号をとっています。
彼はUversa社のシニア設計者として、AJAXをUversa社のアプリケーションに追加する作業を行っています。現在、アリゾナ州フェニックスに住んでいます。
|
|
|
|
|
|
