CodeZine(コードジン)

特集ページ一覧

Dojo ToolkitのDataGridを使いこなす

渋谷テクニカルナイト講師陣が語る新技術動向 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/04 14:00

目次

データの追加と削除

 既存のデータの編集だけではなく、データの追加や削除を行う場合には、Data APIが利用できます。Data Storeが提供するData APIを呼び出して、Data Storeの内容を変更すると、変更が DataGridに通知されて、自動的に表示を更新してくれます。

 例えば、データを追加するボタンを作成して、onClickイベントで次のような関数を呼び出すようにすれば、DataGridに新しいデータの行が追加されます。

dojo.connect(dijit.byId("myAddButton"), "onClick", function(){
    myDataStore.newItem({name: "", email: "", group: 0,
birthDate: 0, photo: ""});
});

 DataGrid上で選択された行のデータを削除するには、DataGridに removeSelectedRows()というメソッドが用意されているので、このメソッドを呼び出すだけです。

dojo.connect(dijit.byId("myRemoveButton"), "onClick", function(){
    dijit.byId("myDataGrid").removeSelectedRows();
});

 removeSelectedRows()は内部的に、選択された行に対応するデータをData Storeから削除するAPI(deleteItem())を呼び出してくれます。

まとめ

 以上、紹介してきたように、DataGridは、リッチなデータ コレクションの表示、編集のためのUIを最小限のアプリケーション側のコードで実現できるばかりではなく、アプリケーションのニーズに応じて、表示や編集方法を柔軟にカスタマイズできるフレームワークを提供しています。DataGridを、Dojo Toolkitが提供するフォーム入力やレイアウト用のウィジェット、チャート描画機能などと組み合わせることにより、ブラウザ上で動作するビジネス アプリケーションの操作性を大きく向上することができるでしょう。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:渋谷テクニカルナイト講師陣が語る新技術動向

もっと読む

著者プロフィール

  • 野口 雅人(ノグチ マサト)

    日本アイ・ビー・エム株式会社 ソフトウェア開発研究所 シニア・テクニカ ル・スタッフ・メンバー 1990年、日本IBM入社。ホームページ・ビルダー、Rational Application Developer などの製品開発に従事。現在はWeb 2.0/RIA関連のソフトウェア開発を担当。

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5