webアプリ‎ > ‎dojo‎ > ‎

dojox.grid.DataGrid

2011/08/23 19:04 に Masanori YONO が投稿   [ 2011/08/23 19:50 に更新しました ]
ブラウザでExcelのように表示できるdojo toolkitというjavascriptのライブラリがあって、自分のWebアプリに組み込んでみました。データを表示するだけなら、チュートリアルが参考になります。Gridのデータの更新処理はeditable=trueにしておけば表示そのものは全然問題ないですが、どのイベントのタイミングで更新したデータをDB等に保存すればいいのか、よくわかりませんでした。ドキュメントからそれらしきものをいくつかイベントリスナに登録してみて試してみました。その中で有効と思えたのがonApplyEditでした。
Enterキーを押すか、他の行をクリックして選択した時にこのイベントが起きる様子。注意しないといけないのは、選択中の行の中でタブキーでカラムを移 動する場合はこのイベントは起きてないです。このイベントの中でローカルDBの場合はSQLiteへの接続して更新処理を入れて、サーバ側のDBで管理する のであればAjaxで通信処理、としてみました。

//テーブル表示するノードを取得。
var rec_table = dijit.byId("myDataGrid");
//イベントリスナへ登録。
dojo.connect(rec_table, "onApplyEdit", function(e){
    //データグリッドの選択中の行の値を変数に格納。
    var id = rec_table.getItem(e).id[0];
    var entry_date = rec_table.getItem(e).entry_date[0];
 
    /*DBやファイルへの更新処理。*/
 
});
 
var myDataStoreString;
var myDataStore;
//データグリッドの書式設定。
var myDataGridStructure = [
    {defaultCell: {headerStyles:"text-align:center;"},cells:[
        {name: "id", field: "id", width: "auto",styles:"text-align:center;"},
	{name: "日付", field: "entry_date", width: "auto",styles:"text-align:center;"},
	{name: "体重", field: "weight", width: "auto",editable: true ,styles:"text-align:right;"},
	{name: "体脂肪率", field: "fat_rate", width: "auto",editable: true , styles:"text-align:right;"},
	{name: "体脂肪重量", field: "fat_weight", width: "auto", styles:"text-align:right;"},
	{name: "除脂肪体重", field: "without_fat_weight", width: "auto", styles:"text-align:right;"},
	{name: "安静時心拍数", field: "pulse", width: "auto", editable: true, styles:"text-align:right;"}
    ]}
];

データグリッドはこんな感じで定義しました。
<table dojoType="dojox.grid.DataGrid" id="myDataGrid" store="myDataStore"
    structure="myDataGridStructure" columnReordering="true"></table>
Comments