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

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.combo.defaults から拡張されています。$.fn.combobox.defaults を使用してデフォルトの defaults を上書きします。

コンボボックス（combobox）は、編集可能なテキストボックスとドロップダウンリストを表示します。ユーザーはドロップダウンリストから1つまたは複数の値を選択できます。ユーザーはリストの先頭にテキストを直接入力するか、リストから既存の値を1つまたは複数選択できます。

依存関係

  • combo

使用法

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

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>

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

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">

JavaScript を使用してコンボボックス（combobox）を作成します。

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

依存関係のある2つのコンボボックス（combobox）を作成します。

<input id="cc1" class="easyui-combobox" data-options="
    valueField: 'id',
    textField: 'text',
    url: 'get_data1.php',
    onSelect: function(rec){
    var url = 'get_data2.php?id='+rec.id;
    $('#cc2').combobox('reload', url);
    }">
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

JSON データ形式の例：

[{
    "id":1,
    "text":"text1"
},{
    "id":2,
    "text":"text2"
},{
    "id":3,
    "text":"text3",
    "selected":true
},{
    "id":4,
    "text":"text4"
},{
    "id":5,
    "text":"text5"
}]

プロパティ

このプロパティはコンボ（combo）から拡張されています。以下はコンボボックス（combobox）に追加されたプロパティです。

名前 型 説明 デフォルト値
valueField string このコンボボックス（ComboBox）の value にバインドされる基本データの名前。 value
textField string このコンボボックス（ComboBox）の text にバインドされる基本データの名前。 text
groupField string グループ化するフィールドを指定します。このプロパティはバージョン 1.3.4 以降で使用できます。 null
groupFormatter function(group) グループ化された項目に表示するグループテキストを返します。このプロパティはバージョン 1.3.4 以降で使用できます。
コード例：
$('#cc').combobox({
    groupFormatter: function(group){
        return '<span style="color:red">' + group + '</span>';
    }
});
mode string テキストが変更されたときにリストデータを読み込む方法を定義します。コンボボックス（combobox）がサーバーから読み込む場合は 'remote' に設定します。'remote' モードに設定すると、ユーザーが入力した値は新しいデータを取得するために 'q' という名前の HTTP リクエストパラメータとしてサーバーに送信されます。 local
url string リモートからリストデータを読み込むための URL。 null
method string データを取得するための HTTP メソッド。 post
data array 読み込まれるリストデータ。
コード例：
<input class="easyui-combobox" data-options="
        valueField: 'label',
        textField: 'value',
        data: [{
            label: 'java',
            value: 'Java'
        },{
            label: 'perl',
            value: 'Perl'
        },{
            label: 'ruby',
            value: 'Ruby'
        }]" />
null
filter function 'mode' が 'local' に設定されている場合にローカルデータをフィルタリングする方法を定義します。この関数には2つのパラメータがあります：
q：ユーザーが入力したテキスト。
row：リストの行データ。
true を返すとその行を表示できます。

コード例：
$('#cc').combobox({
    filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
formatter function 行の表示方法を定義します。この関数には1つのパラメータがあります：row。
コード例：
$('#cc').combobox({
    formatter: function(row){
        var opts = $(this).combobox('options');
        return row[opts.textField];
    }
});
loader function(param,success,error) リモートサーバーからデータを読み込む方法を定義します。false を返すとそのアクションがキャンセルされます。この関数には次のパラメータがあります：
param：リモートサーバーに送信するパラメータオブジェクト。
success(data)：データの取得に成功したときに呼び出されるコールバック関数。
error()：データの取得に失敗したときに呼び出されるコールバック関数。
 json loader
loadFilter function(data) 表示するフィルタリング済みデータを返します。このプロパティはバージョン 1.3.3 以降で使用できます。

イベント

このイベントはコンボ（combo）から拡張されています。以下はコンボボックス（combobox）に追加されたイベントです。

名前 パラメータ 説明
onBeforeLoad param データの読み込みを要求する前にトリガーされます。false を返すと読み込みアクションがキャンセルされます。
コード例：
// change the http request parameters before load data from server
$('#cc').combobox({
    onBeforeLoad: function(param){
        param.id = 2;
        param.language = 'js';
    }
});
onLoadSuccess none リモートデータの読み込みが成功したときにトリガーされます。
onLoadError none リモートデータの読み込みが失敗したときにトリガーされます。
onSelect record ユーザーがリスト項目を選択したときにトリガーされます。
onUnselect record ユーザーがリスト項目の選択をキャンセルしたときにトリガーされます。

メソッド

このメソッドはコンボ（combo）から拡張されています。以下はコンボボックス（combobox）に追加または上書きされたメソッドです。

名前 パラメータ 説明
options none オプション（options）オブジェクトを返します。
getData none 読み込まれたデータを返します。
loadData data ローカルのリストデータを読み込みます。
reload url リモートのリストデータを要求します。'url' パラメータを渡すと元の URL 値を上書きします。
コード例：
$('#cc').combobox('reload');  // reload list data using old URL
$('#cc').combobox('reload','get_data.php');  // reload list data using new URL
setValues values コンボボックス（combobox）の値の配列を設定します。
コード例：
$('#cc').combobox('setValues', ['001','002']);
setValue value コンボボックス（combobox）の値を設定します。
コード例：
$('#cc').combobox('setValue', '001');
clear none コンボボックス（combobox）の値をクリアします。
select value 指定されたオプションを選択します。
unselect value 指定されたオプションの選択をキャンセルします。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張