qx.ui.table.Tableのデータ変更とチェックボックス

qooxdoo 0.6.2でサンプルに入ってたtableをちょっと変更してチェックボックスの変更ができるようにしてみた。

基本的には qx.ui.table.SimpleTableModel を作成して、 setColumnEditable で目的の列を true に設定すれば、変更可能になる。
チェックボックス表示にしたい場合は、列の値にbool値を入れて、レンダラをセットすればOK。

setDataCellRenderer(2, new qx.ui.table.BooleanDataCellRenderer());

この状態で値を変更しようとセルをダブルクリックすると、セルにtrue/falseの文字列が出てきてしまうので、CheckBox 用の CellEditorFactory をセットしてやる必要がある。

setCellEditorFactory(2, new qx.ui.table.CheckBoxCellEditorFactory());

そんな感じでまとめたのが以下。
マウス操作だけでテーブル内のチェックボックスを編集可能。

// table model
var tableModel = new qx.ui.table.SimpleTableModel();
tableModel.setColumns([ "ID", "テキスト", "チェック" ]);
var rowData = [];
tableModel.setData(rowData);
tableModel.setColumnEditable(2, true);

// table
var table = new qx.ui.table.Table(tableModel);
with (table) {
  set({ width: '100%', height: '100%', border:qx.renderer.border.BorderPresets.getInstance().thinInset });
  setMetaColumnCounts([1, -1]);
  getSelectionModel().setSelectionMode(qx.ui.table.SelectionModel.SINGLE_SELECTION);
  getTableColumnModel().setDataCellRenderer(2, new qx.ui.table.BooleanDataCellRenderer());
  // CheckBox 用の CellEditorFactory をセット
  getTableColumnModel().setCellEditorFactory(2, new qx.ui.table.CheckBoxCellEditorFactory());
  setColumnWidth(0, 80);
  setColumnWidth(1, 200);
  setColumnWidth(2, 100);
};
HorizontalBoxLayout_1.add(table);

これで解決…と行きたかったのだが、どうにも、
セルをダブルクリックして編集可能状態に→シングルクリックでオン/オフ切り替え→確定
という手順を踏まないといけない…めんどい。
何とかならんものか。

あとついでにセルのデータが変更されたときに何かする方法。

table.get("tableModel").addEventListener("dataChanged", function(e) {
  var col = e.get("data")['firstColumn'];
  var row = e.get("data")['firstRow'];
  var value = e.get("target").getValue(col, row);
  …
});

範囲が必要な場合は lastRow と lastColumn も使える。

---

コメントを残すか、ご自分のサイトからトラックバックすることができます。