SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

Dojo ToolkitのDataGridを使いこなす

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

データの追加と削除

 既存のデータの編集だけではなく、データの追加や削除を行う場合には、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が提供するフォーム入力やレイアウト用のウィジェット、チャート描画機能などと組み合わせることにより、ブラウザ上で動作するビジネス アプリケーションの操作性を大きく向上することができるでしょう。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
渋谷テクニカルナイト講師陣が語る新技術動向連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3486 2009/02/04 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング