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