記一次jQuery EasyUI使用-Easyui combobox的使用方法

開局附上最最最有用的官方文檔。

劃重點⚠️:easyui使用手冊

進入正題--------------------------------------------------------------------------------------------------------------------------------------------------------------

現象:

有這樣一段代碼,瀏覽器請求getSystemSignList方法有返回數據並且嚴格符合easyui的應答規範--一個json格式的list對象。

<tr>
<td class="FormdataL">系統標識:</td>
<td width="400px"> 
<input class="easyui-combobox" style="width:110px;" id="systemSign"                 
name="systemSign" editable="false"   url="${pageContext.request.contextPath}/dictionary/dictionary!getSystemSignList.action" valueField="itemCode" textField="itemName" disabled="true">
</td>
</tr>

現象是textField不顯示查出來的值。顯示的是個0.  於是進入一臉懵逼的狀態。。。。。。

valueField:基礎數據值名稱綁定到Combobox(提交值)

textField:基礎數據的字段名稱綁定的Combobox(顯示值)

排查:

首先確定就是頁面展示的問題了,因爲瀏覽器請求的response結果是符合要求的,但是爲什麼展示不出來呢?

首先看哪裏有沒有對id="systemSign" 做了改變。果不其然有如下一行代碼:

$(document).ready(function(){
  	$('#systemSign').combobox('select', '${systemSign}');			
});

一直不理解這是什麼意思,感覺並沒有什麼操作呀,奇奇怪怪。

官方文檔這麼迴應:

可能覺得太簡單?不屑於過多的解釋?反正就是你現在看到的這麼可憐的一句話。

那就只能我去翻譯一下啦

用法實例:$('#customerStatusList').combobox('select', '1');

解釋:id="customerStatusList"的輸入框,指定value=1的對象,顯示的內容都是此對象的內容。

這樣一來,一切都解釋通了。

首先getSystemSignList方法會查詢很多個對象組成的一個list,那麼顯示的的話需要選擇其中的一個對象,一般我們會想遍歷,但是這個框架就是這麼的便捷,你不需要遍歷,你只需要指定value是哪個,它自動給你選出來這個對象,然後自然他的值隨你處置。

頁面加載完成,就將id=systemSign的框進行指定對象,指定value對應的對象,進行展示。

爲了方便理解,下面是實例版:

如果請求應答結果是

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

那麼可以通過以下兩種方法指定默認值:

$('#customerStatusList').combobox('select', '1');//選擇id=1的對象text

或者

$("#customerStatusList").combobox("setValue",1);//選擇id=1的對象text

 

設計借鑑:

有一個查詢列表的方法很多地方都用到了,有的用所有的,有的用其中的一個,那就非常合適用easyui的這個。

用所有的就不必說了,用其中的一個的,只需要指定value就可以選擇啦。非常方便。

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章