39 lines
3.8 KiB
Markdown
39 lines
3.8 KiB
Markdown
# ツリー
|
||
|
||
**コントロール機能**：ツリー構造のコントロールで、階層的なデータ（例：ディレクトリ、組織構造など）を表示するために使用されます。非同期読み込み、ノードの追加・削除・編集、チェックボックス選択、ツールバー操作などの機能をサポートしています。静的ツリーまたは編集可能なツリーとして利用可能です。
|
||
|
||
**タイプ**：コンテナーコントロール
|
||
**親クラスコントロール**：`bricks.VScrollPanel`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 必須 | 説明 |
|
||
|--------|------|------|------|
|
||
| `row_height` | `String` | 否 | 各ノード行の高さ。デフォルトは `'35px'` |
|
||
| `idField` | `String` | 是 | データ内でノードの一意識別子を表すフィールド名 |
|
||
| `textField` | `String` | 是 | データ内でノードの表示テキストを表すフィールド名 |
|
||
| `is_leafField` | `String` | 否 | ノードが葉ノードかどうかを示すフィールド名。デフォルトは `'is_leaf'` |
|
||
| `typeField` | `String` | 否 | ノードの種類を区別するためのフィールド名。アイコンのカスタマイズに使用 |
|
||
| `data` | `Array` | 否 | 静的ツリーのデータ配列。直接ノードを初期化 |
|
||
| `dataurl` | `String` | 否 | 子ノードデータを非同期で読み込むためのURLアドレス |
|
||
| `method` | `String` | 否 | データ取得時のリクエスト方法。デフォルトは `'GET'` |
|
||
| `params` | `Object` | 否 | リクエスト時に付加されるグローバルパラメータ |
|
||
| `node_view` | `Widget Description` | 否 | ノード描画テンプレートのカスタマイズ（記述オブジェクト） |
|
||
| `checkField` | `String` | 否 | チェックボックス機能を使用する場合、データ内にチェック状態を保持するフィールド名 |
|
||
| `node_typeicons` | `Object` | 否 | ノードタイプごとにアイコンを定義するマッピングテーブル。形式： `{ nodetype: { open, close, leaf }, default_type: "type" }` |
|
||
| `editable` | `Object` | 否 | 編集設定。`fields`, `add_url`, `delete_url`, `update_url` などを含む |
|
||
| `newdata_params` | `Object` | 否 | 新規ノード追加時に追加される固定パラメータ |
|
||
|
||
## 主なイベント
|
||
|
||
| イベント名 | 発生条件 | コールバックパラメータの説明 |
|
||
|--------|--------|-------------|
|
||
| `node_selected` | ノードがクリックされ選択または選択解除されたときに発生 | パラメータは `node.user_data` に `{ selected: true/false }` を拡張したもの |
|
||
| `check_changed` | ノードのチェックボックスの状態が変更されたときに発生 | パラメータはそのノードの `user_data`。最新のチェック状態を反映 |
|
||
| `command`（`toolbar_w`より） | ツールバーボタンがクリックされたときに発生 | `toolbar_command` が処理し、`event.params.name` に基づいて追加、削除、更新、その他のカスタムコマンドを実行 |
|
||
| （カスタムコマンド）例：`add`, `delete`, `update`など | 対応する操作が実行され、正常に送信された後、`dispatch(name, data)` により発生 | `data` にはノードデータとメタ情報 `meta_data`（出所、タイトル、アイコンなど）が含まれており、フォームを開いたり、他のモジュールに通知したりするために使用可能 |
|
||
|
||
その他、`Tree` は以下のユーザー操作に対しても反応し、対応するロジックを実行します：
|
||
- ノードの展開／折りたたみ（`expand()` / `collapse()` 経由）
|
||
- 子ノードデータの動的読み込み（`get_children_data`）
|
||
- ノードの追加・削除・編集（HTTPリクエストまたはローカル操作経由） |