webアプリ‎ > ‎

dojo

onStyleRow

2011/08/23 19:27 に Masanori YONO が投稿   [ 2011/08/23 19:48 に更新しました ]

Gridのスタイルを変更に伴うイベントなので、このイベントを登録して、セルや行の背景色を変更できるみたい。ただ、データストア時にもこのイベントが起きているみたいで、行のデータを参照して色を変更、というような以下のような処理ではエラーが起きた。

var rec_table = dijit.byId("myDataGrid");
dojo.connect(rec_table, "onStyleRow", function(d_row){
    var item = rec_table.getItem(d_row.index);
   
    
//if(item == null) return;
   
    var weight = rec_table.getItem(d_row.index).weight[0];

    if(weight > 60){
        d_row.customStyles += "background-color:yellow;";
    }
    rec_table.focus.styleRow(d_row);
    rec_table.edit.styleRow(d_row);
});


なのでコメント文のようにデータストアされる前ならこのイベントでの処理を抜けるようにした。このイベントはセルを選択したり、ポインタを置いたりするたびに発生している様子。データストアの時に一度だけ設定すればいいようなイベントは自分が知らないだけであるのかもしれない。ただ、グリッドでソートして行の入れ替えもできるので、このイベントで設定するのが確実なのかもしれない。

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>

1-2 of 2