jQuery EasyUI フォームプラグイン -Combotree コンボツリー
jQuery EasyUI プラグイン
拡張元は $.fn.combo.defaults と $.fn.tree.defaults です。$.fn.combotree.defaults を介してデフォルトの defaults を上書きします。
コンボツリー(combotree)は、選択コントロールとドロップダウンツリーを組み合わせたものです。コンボボックス(combobox)に似ていますが、リストをツリーコンポーネントに置き換えた点が異なります。コンボツリー(combotree)は、複数選択用のツリー状態チェックボックス付きのツリーをサポートしています。
依存関係
- combo
- tree
使用方法
マークアップからコンボツリー(combotree)を作成します。
<select id="cc" class="easyui-combotree" style="width:200px;"
data-options="url:'get_data.php',required:true">
</select>
JavaScriptを使用してコンボツリー(combotree)を作成します。
<input id="cc" value="01">
$('#cc').combotree({
url: 'get_data.php',
required: true
});
プロパティ
このプロパティはコンボ(combo)とツリー(tree)から拡張されています。以下はコンボツリー(combotree)に追加または上書きされるプロパティです。
| 名前 | 型 | 説明 | デフォルト値 |
|---|---|---|---|
| editable | boolean | ユーザーがテキストフィールドに直接文字を入力できるかどうかを定義します。 | false |
イベント
このイベントはコンボ(combo)とツリー(tree)から拡張されています
メソッド
このメソッドはコンボ(combo)から拡張されています。以下はコンボツリー(combotree)に追加または上書きされるメソッドです。
| 名前 | パラメータ | 説明 |
|---|---|---|
| options | none | オプション(options)オブジェクトを返します。 |
| tree | none | ツリー(tree)オブジェクトを返します。次の例は、選択されたツリーノードを取得する方法を示しています。
var t = $('#cc').combotree('tree'); // get the tree object
var n = t.tree('getSelected'); // get selected node
alert(n.text);
|
| loadData | data | ローカルのツリー(tree)データを記憶します。 コード例:
$('#cc').combotree('loadData', [{
id: 1,
text: 'Languages',
children: [{
id: 11,
text: 'Java'
},{
id: 12,
text: 'C++'
}]
}]);
|
| reload | url | リモートのツリー(tree)データを再度リクエストします。'url' パラメータを渡して元のURL値を上書きします。 |
| clear | none | コンポーネントの値をクリアします。 |
| setValues | values | コンポーネントの値の配列を設定します。 コード例:
$('#cc').combotree('setValues', [1,3,21]);
|
| setValue | value | コンポーネントの値を設定します。 コード例:
$('#cc').combotree('setValue', 6);
|
jQuery EasyUI プラグイン その他の拡張機能