jQuery EasyUIのPropertyGridを使う(3)

これまで「プロパティ名(キーワード)と値のセット」をjQuery EasyUIのPropertyGridを使って表示してきたが、このプラグインは値の入力にも使える。もともとPropertyGridは、DataGridをベースにしていて、編集機能についてもDataGridの機能をそのまま引き継いでいる。

• 編集可能にする

列（行）を定義する際に、”name”と”value”,”group”を指定していた(*)が、これに”editor”を追加するだけで編集可能になる。その際、データの種類を指定する。
(*)PropertyGridは表示が2列固定の特別なDatagrid。列名が順に”text”,”value”で、その値がそれぞれ”xxx”,”(init)”の場合で、”Sample”というグループに所属させる場合は以下のように記述する。

{"name" : "xxx","value":"(init)","group":"Sample","editor":"text"}

• 初期状態：
• 
• 編集状態：
• 

• 指定できるデータ種類

指定可能なデータは、
text, textarea, checkbox, numberbox, validatebox, datebox, combobox, combotree
の8種類で、オプションをつけれるものもある。（データ種類は自分で拡張することも可能。）

• 実行例

{"name" : "text","value":"(init)","group":"Sample","editor":"text"},
{"name" : "text area","value":"(init)","group":"Sample","editor":"textarea"},
{"name" : "validation","value":"(init)","group":"Sample",
   "editor":{ "type":"validatebox","options":{"validType": "email"}}},
{"name" : "combobox","value":"(init)","group":"Sample",
   "editor":"combobox"},
{"name" : "checkbox","value": "true","group":"Sample",
   "editor": { "type":"checkbox","options":{"on":"true","off":"false" }}}

• textarea：
• 
• validatebox：
• 
• 

• combobox：
• 
• checkbox：

• 値の取得

DataGridの値は、以下のようにして得ることができる。indexが何行目かを、’value’が列名を表している。

$('#gridOptions').datagrid('getRows')[index]['value'];

• 編集終了タイミングの検知

きちんとやるには、モード切替などにより行単位での制御機構が必要だが、単純にセル単位で検知するには、onAfterEditなどのイベントをキャッチすればよい。具体的には以下のようにする。

$('#gridOptions').propertygrid({
  onAfterEdit: function(index,field,value){
    if (index == 0) { // 先頭行が編集された
      newValue = $('#gridOptions').datagrid('getRows')[index]['value'];
    }
  }
});