jQueryのEasyUIフォームプラグイン - コンボボックスコンボボックス

頼ります

• コンボ

使用法

事前定義された構造（コンボボックス）で、<select>要素からのコンボボックスを作成します。

<選択のid = "CC"クラス= "easyui-コンボボックス"名前= "DEPT"スタイル= "幅：200pxの;">
    <オプション値= "AA"> aitem1 </オプション>
    <オプション> bitem2 </オプション>
    <オプション> bitem3 </オプション>
    <オプション> ditem4 </オプション>
    <オプション> eitem5 </オプション>
</選択>

<入力>タグからコンボボックス（コンボボックス）を作成します。

<入力されたID = "CC"クラス= "easyui-コンボボックス"名前= "DEPT"
    データ・オプション= "valueField：「ID」、テキストフィールド：「テキスト」は、url： 'get_data.php'">

コンボボックス（コンボボックス）を作成するにはJavaScriptを使用してください。

<入力されたID = "CC"名前= "DEPT"値= "AA">

$（ '＃のC-C'）。コンボボックス（{
    URL： 'combobox_data.json」、
    valueField：「ID」、
    テキストフィールド：「テキスト」
}）;

2依存コンボボックス（コンボボックス）を作成します。

<入力されたID = "CC1"クラス= "easyui-コンボボックス「データ・オプション="
    valueField：「ID」、
    テキストフィールド：「テキスト」、
    URL： 'get_data1.php」、
    onSelect：機能（REC）{
    var urlは= '？get_data2.phpのid =' + rec.id。
    。$（ '＃CC2を'）コンボボックス（ 'リロード'、URL）;
    } ">
<入力されたID = "CC2"クラス= "easyui-コンボボックス「データ・オプション=" valueField：「ID」、テキストフィールド： 'テキスト' ">

JSONデータ形式の例：

[{
    「ID」：1、
    "テキスト"： "テキスト1"
}、{
    "ID"：2、
    "テキスト"： "テキスト2"
}、{
    「ID」：3、
    "テキスト"： "テキスト3」、
    「選択」：真
}、{
    「ID」：4、
    "テキスト"： "text4"
}、{
    「ID」：5、
    "テキスト"： "text5"
}]

プロパティ

プロパティが組み合わせ（コンボ）から延び、以下は、コンボボックス（コンボボックス）プロパティを追加です。

$('#cc').combobox({
	groupFormatter: function(group){
		return '<span style="color:red">' + group + '</span>';
	}
});

<input class="easyui-combobox" data-options="
		valueField: 'label',
		textField: 'value',
		data: [{
			label: 'java',
			value: 'Java'
		},{
			label: 'perl',
			value: 'Perl'
		},{
			label: 'ruby',
			value: 'Ruby'
		}]" />

$('#cc').combobox({
	filter: function(q, row){
		var opts = $(this).combobox('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});

$('#cc').combobox({
	formatter: function(row){
		var opts = $(this).combobox('options');
		return row[opts.textField];
	}
});

イベント

組み合わせ（コンボ）から拡大したイベントは、以下のイベントを追加するためのコンボボックス（コンボボックス）です。

// change the http request parameters before load data from server
$('#cc').combobox({
	onBeforeLoad: function(param){
		param.id = 2;
		param.language = 'js';
	}
});

ウェイ

方法は組み合わせ（コンボ）から延びて、次のメソッドを追加したり、上書きするコンボボックス（コンボボックス）です。

$('#cc').combobox('reload');  // reload list data using old URL
$('#cc').combobox('reload','get_data.php');  // reload list data using new URL

$('#cc').combobox('setValues', ['001','002']);

$('#cc').combobox('setValue', '001');