jquery easyUI中combobox的使用總結
一、如何讓jquery-easyui的combobox像select那樣不可編輯?
為combobox添加editable屬性 設置為false
$('#goods_series').combobox({
url:"xxx/getBrandsGoodsSeries",
valueField:'goods_series',
textField:'goods_series',
editable:false
});
獲取值：
'goods_series':$("#goods_series").combobox("getValue"),
表單：
<input class="easyui-combobox" type="text" id="goods_series" name="goods_series"/>
二、讓combobox可輸入，為combobox添加editable屬性 設置為true，輸入內容是作為搜索下拉框里面值的快捷方式，可以設置本地和romote兩種方式
三、如何讓combobox兼容選擇和輸入，並把輸入的內容作為新增內容？
easyui本身輸入的只是作為搜索快捷方式，沒有提供api接口可以直接獲取到輸入框里面的內容，也不能直接根據ID或者input里面的值（輸入框是combobox組件自動添加的，沒有ID）。
通過大量測試實戰結果得出的一個解決方法是：獲取所有.combo-text然后獲取父節點上一個兄弟節點，判斷comboname（組件自動添加的）屬性值為對應input的name時獲取這個input的值
function getGoodSeries(){
var value = "";
//console.log($(".combo-text"));
$.each($(".combo-text"),function(i,o){
//console.log($(o).parent().prev().attr('comboname'));
if($(o).parent().prev().attr('comboname') == 'goods_series'){
//console.log($(o).val());
value = $(o).val();
}
});
return value;
}
//提交表單獲取值的時候使用：var goods_series = getGoodSeries();
function goodsbrandSelect(){
$('#goods_series').combobox({
url:"xxx",
valueField:'goods_series',
textField:'goods_series',
//hasDownArrow:false,
editable:true
});
}
級聯方式在上一個combobox的data-options里面加上onSelect:goodsbrandSelect,onLoadSuccess:goodsbrandSelect
四、editable:true + hasDownArrow:false 可以作為一組打造自動提示輸入框沒有下拉框的效果。
五、onChange事件可以在有級聯項時，作為清空級聯項值的一個擴展點。但是並不能作為載入級聯項值的地方，因為此時主combobox還沒選中。
載入級聯項值的地方應該是在onSelect和onLoadSuccess事件中，function中傳入有參數rec，也就是選中的那條記錄
六、onBeforeLoad函數會在兩種情況下觸發：1.combobox初始化的時候 2.remote方式發起請求成功收到服務器傳來的值時
其中1初始化時無論載入方式是local還是remote，是url還是data方式，都會觸發onBeforeLoad。
當通過url載入數據onBeforeLoad返回false，就無法載入數據，通過data載入數據無論onBeforeLoad返回什么，combobox都已經有data數據了。
可以利用這個函數處理local模式下的級聯等。
onBeforeLoad若return true那就會發起請求到服務器請求數據，若成功獲得數據，就會觸發onLoadSuccess
七、group可以展現兩層樹形目錄形式方便用戶選擇，設置示例：
groupField:'gf',
groupFormatter:function(group){
return function(group){
//doSomething
};
},
這里的groupField就是需要group的字段，一般這個字段存的都是id或code等。
在groupFormatter中將其匹配成顯示內容。