TOP＞書籍連動＞ スクロールバーに接続する

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社のアプリケーションに追加する作業を行っています。現在、アリゾナ州フェニックスに住んでいます。

INDEX 第3回：テーブルにスクロールバーを実装する   JPSpanプロキシクラス   スクロールバーを追加する スクロールバーに接続する