忍者ブログ

2018
06
23

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/06/23 (Sat.)

2010
10
18

Google Visualization Table の page イベント


前回の「Google Visualization Events」では、Google Visualization のイベント処理の設定方法とそれを使った簡単な例として select イベントを紹介しました。今回は Google Visualization Table に用意されている page イベントについて述べましょう。

Google Visualization Table の 標準のページ処理

Google Visualization Table では、draw メソッドを実行する時に設定する第二引数であるテーブルオプションの設定でページ化を実現します。4行ずつのページにする設定は次のとおりです。

table.draw(data, {page: 'enable', pageSize:4});

こう設定することでテーブルの左下にページナビゲーションボタンが出現して、次のページに進めたり、前のページに戻れるようになります。

Google Visualization Table の page イベントの設定

Google Visualization Table では、標準のページ処理ではなく、カスタマイズした処理を設定できる方法が用意されています。それはページナビゲーションボタンをクリックした時に指定した関数を実行するというイベント処理の方法です。これを実現するためには、まずテーブルオプションの page プロパティの値を'event'に設定します。そして、page イベントが発生した時に実行する関数を登録します。

table.draw(data,{page:'event', pageSize:4, startPage:1});

google.visualization.events.addListener(
 table,
 'page',
 pageHandler
);
function pageHandler(e) {
   alert(e['page']);
}

この例では、テーブルオプションの startPage の値を 1 に設定しているで、最初に表示されるのは2ページ目です。そして、前ページボタンを押すと「0」、次ページボタンを押すと「2」がアラート表示されます。しかし、それで終わりです。前ページも次ページも表示されません。

page イベントからの再表示

テーブルオプションの page プロパティの値を'event'に設定した場合、標準のページ処理は行われなくなります。例えば、次ページボタンを押しても次のページは表示されません。ただ次ページの番号がイベント処理関数に送られるだけです。

次ページボタンを押したら、次のページが表示されるようにするには、イベント処理関数でその処理を記述しなければなりません。すなわち、送られてきたイベントオブジェクトから page プロパティを取得します。そして、この値をテーブルオプションの startPage の値としてテーブルを再表示するのです。

function pageHandler(e) {
   alert(e['page']);
   var options={page:'event', pageSize:4, startPage:e['page']};

   table.draw(data,options);

}

サンプルページ

次のページでは、上記の記述例を実際に確かめることできます。

Google Visualization Table の page イベントの利用例

参考

Handling Events - Google Visualization Google Visualization Table
PR

2010/10/18 (Mon.) Trackback(0) Comment(0) Google Visualization

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

05 2018/06 07
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア