jQuery EasyUI フォーム -ドロップダウンボックスのフォーマット

このチュートリアルでは、ドロップダウンボックス(Combobox)に画像アイテムを表示する簡単なドロップダウンボックスの作成方法を説明します。ドロップダウンボックス(combobox)で formatter 関数を使用して、各エントリをフォーマットする方法を指定できます。

画像ドロップダウンボックス(Combobox)の作成

    <input id="cc" style="width:100px"
            url="data/combobox_data.json"
            valueField="id" textField="text">
    </input>
    $('#cc').combobox({
        formatter:function(row){
            var imageFile = 'images/' + row.icon;
            return '<img class="item-img" src="'+imageFile+'"/><span class="item-text">'+row.text+'</span>';
        }
    });

jQuery EasyUI インスタンスをダウンロード

jeasyui-form-form4.zip

その他の拡張