easyUI中select下拉框新增option選項
資料庫讀出來的,然後我想在動態生成的項中新增一項:"<option value=''>=全部=</option>"。
但怎麼也新增不成功。
首先試了直接用jquery對該下拉列表進行新增操作:
JavaScript code ?
1 2 3 4 5 6 7 8 |
$( '#selUnin' ).combobox({
url: _callback_url + '&action=getUnin' ,
valueField: 'id' ,
textField: 'text' }
});
$( "#selUnin" ).append( "<option value=''>=全部=</option>" );
|
沒作用,然後想了想得在資料載入成功後就行追加,就在對應的方法裡
又嘗試了下,還是沒作用:
JavaScript code ?
1 2 3 4 5 6 7 8 |
$( '#selUnin' ).combobox({
url: _callback_url + '&action=getUnin' ,
valueField: 'id' ,
textField: 'text' ,
onLoadSuccess: function (param) {
$( "#selUnin" ).append( "<option value=''>=全部=</option>" );
}
});
|
在網上也查了很久,一直沒能找到方法解決.經過學習得知:
因為jquery easyui的下拉列表combobox是用DIV模擬的(其實看看它的樣式就應該想到)。
解決辦法:
步驟如下:
1、一個空下拉框
<select id="customCombobox">
</select>
2、為下拉框新增子項(這時候可以是後臺讀過來的資料)
$("#customCombobox").append("<option value='1'>JAVA</option>");
3、將下拉框轉化為EASYUI中的Combobox
$("#customCombobox").combobox({});
只要填充好資料再去轉化那就一定不會出問題!
另外一種方法:
<input id="comCc" value="0" class="easyui-combobox" data-options="required:true,editable:false,valueField:'id',textField:'text',width:80" />
$(function () {
$.setAreabox('comCc', "/Report/test/test");//初始銷區下拉框
})
================================================================我是分割線========================================
升級版
這次做專案遇到了一個問題,在easyui-combobox載入json資料中物件的屬性。後臺返回的json中包含一個物件,而我想呼叫物件中的屬性,後臺返回的json如下:
json中包含total和rows,而rows下面才是我要顯示在combobox的值,API規定必須用下面格式的json:
按著常規講我會像json.rows.userId 這樣設定valueField屬性,結果明顯不行,但這並不出乎我的意料,就是出於嘗試的心態。現在的問題是如何獲得這個json的物件,並且呼叫時只用屬性名userId,name。
其實,很簡單就解決了,還是先看api示例:
看我是怎麼解決的:
combobox必須按著api指定格式載入json資料,我這裡的json是層層巢狀的,所以肯定不信了,那我們可以換個思路。呼叫Jquery提供的getJSON方法,獲取到我json,在初始化combobox使指定data屬性為:json.rows,OK,就這麼簡單!!!看,資料取到了
附錄:
- 當我們用class初始化combobox物件後,他會自動把本身html >> select >> onChange的事件遮蔽掉。
- 有時候我們並不希望使用者自己填寫combobox的值,取而代之的是選擇固定的值,解決辦法:給combobox新增editable屬性 並設定為false。