藍(lán)橋軟件學(xué)院簡(jiǎn)單下拉框

1、簡(jiǎn)單下拉框課程目標(biāo)?了解Combo的基本屬性、方法和事件?靈活掌握Combobox的基本操作ComboCombo簡(jiǎn)介自定義下拉框顯示一個(gè)可編輯的文本框和下拉面板在html頁(yè)面。這是構(gòu)建其他復(fù)雜的組合部件（如：combobox,combotree,combogrid等）之前需要構(gòu)建的最基本的組件。Combo擴(kuò)展自ValidateBox。Combo并不是學(xué)習(xí)的重點(diǎn)，只是為后續(xù)的ComboBoxComboTree及ComboGrid打基礎(chǔ)。大家簡(jiǎn)單了解即可。效果如下圖：開(kāi)發(fā)Combo程序復(fù)制5.inputtyperadionamelang6.inputtyperadionamelang7.input

2、typeradionamelang8.inputtyperadionamelang9.inputtyperadionamelang10.11.12.scripttypetext/javascript13.function5.inputtyperadionamelang6.inputtyperadionamelang7.inputtyperadionamelang8.inputtyperadionamelang9.inputtyperadionamelang10.11.12.scripttypetext/javascript13.functionvalue01value02value03valu

3、e04value05TOCo1-5hz/*當(dāng)點(diǎn)擊刷新按鈕刷新頁(yè)面時(shí)combo控件中的值被清除，但是單選按鈕依然是選中狀態(tài)，所以需要清除checked屬性*/#spinputchecked#cctruefalse#sp”#cc”panel#spinputfunctionvarthisvarthisspan#ccsetValuesetTexthidePanel參考代碼：效果如上圖。自定義下拉框使用Javascript創(chuàng)建一個(gè)select或input元素。注意：使用自定義下拉框不能通過(guò)標(biāo)簽的方式進(jìn)行創(chuàng)建。Combo常用屬性屬性名屬性值類型描述默認(rèn)值widthnumber組件的寬度。autoheigh

4、tnumber組件的高度。22panelWidthnumber下拉面板寬度。nullpanelHeightnumber下拉面板高度。200panelMinWidthnumber下拉面板最小寬度。nullpanelMaxWidthnumber下拉面板最大寬度。nullpanelMinHeightnumber下拉面板最小咼度。nullpanelMaxHeightnumber下拉面板最大高度。nullpanelAlignstring面板對(duì)齊方式?？捎弥涤校簂eft,right。200multipleboolean定義是否支持多選。falseselectOnNavigationboolean定義是否允

5、許使用鍵盤(pán)導(dǎo)航來(lái)選擇項(xiàng)目。trueseparatorstring在多選的時(shí)候使用何種分隔符進(jìn)行分割。editableboolean定義用戶是否可以直接輸入文本到字段中。truedisabledboolean設(shè)置啟用/禁用字段。falsereadonlyboolean設(shè)置該字段為讀寫(xiě)/只讀模式。falsehasDownArrowboolean定義是否顯示向下箭頭按鈕。truevalue字段的默認(rèn)值。delaynumber最后一次輸入事件與執(zhí)行搜索之間的延遲間隔（執(zhí)行自動(dòng)完成功能的延遲間隔）200keyHandlerobject在用戶按下鍵的時(shí)候調(diào)用一個(gè)函數(shù)。案例一：代碼如下:復(fù)制1.#cc2.r

6、ight3.1004.3005.true6.true7.false8.false參考代碼：效果如下圖：Combo常用方法方法名方法參數(shù)描述optionsnone返回屬性對(duì)象。panelnone返回下拉面板對(duì)象。textboxnone返回文本框?qū)ο?。destroynone銷毀該組件。resizewidth調(diào)整組件寬度。showPanelnone顯示下拉面板。hidePanelnone隱藏下拉面板。disablenone禁用組件。enablenone啟用組件。readonlymode啟用/禁用只讀模式。validatenone驗(yàn)證輸入的值。isValidnone返回驗(yàn)證結(jié)果。clearnone清除

7、控件的值。resetnone重置控件的值。getTextnone獲取輸入的文本。setTexttext設(shè)置輸入的文本。getValuesnone獲取組件值的數(shù)組。setValuesvalues設(shè)置組件值的數(shù)組。getValuenone獲取組件的值。setValuenone設(shè)置組件的值。Combo常用事件事件名事件參數(shù)描述onShowPanelnone當(dāng)下拉面板顯示的時(shí)候觸發(fā)。onHidePanelnone當(dāng)下拉面板隱藏的時(shí)候觸發(fā)。onChangenewValue,oldValue當(dāng)字段值改變的時(shí)候觸發(fā)。ComboboxCombobox簡(jiǎn)介下拉列表框顯示一個(gè)可編輯文本框和下拉式列表，用戶可以選擇

8、一個(gè)值或多個(gè)值。用戶可以直接輸入文本到列表頂部或選擇一個(gè)或多個(gè)當(dāng)前列表中的值。效果如下圖：開(kāi)發(fā)Combobox程序復(fù)制1.vselectclass2.optionvalue13.optionvalue14.optionvalue15.optionvalue16.optionvalue7.easyui-comboboxALAKAZARCAnamestatestyle200px參考代碼：效果如上圖。Combobox常用屬性屬性名屬性值類型描述默認(rèn)值valueFieldstring基礎(chǔ)數(shù)據(jù)值名稱綁定到該下拉列表框。valuetextFieldstring基礎(chǔ)數(shù)據(jù)字段名稱綁定到該下拉列表框。textg

9、roupFieldstring指定分組的字段名稱。nullgroupFormatterfunction(group)返回格式化后的分組標(biāo)題文本，以顯示分組項(xiàng)。modestring定義了當(dāng)文本改變時(shí)如何讀取列表數(shù)據(jù)。localurlstring通過(guò)URL加載遠(yuǎn)程列表數(shù)據(jù)。nullmethodstringHTTP方法檢索數(shù)據(jù)（POST/GETpostdataarray數(shù)據(jù)列表加載。nullfilterfunction疋義當(dāng)mode設(shè)置為local時(shí)如何過(guò)濾本地?cái)?shù)據(jù)，函數(shù)有2個(gè)參數(shù)：q：用戶輸入的文本。row：列表行數(shù)據(jù)。返回true的時(shí)候允許行顯示。formatterfunction定義如何渲染行

10、。該函數(shù)接受1個(gè)參數(shù)：row。loaderfunction(param,success,error)定義了如何從遠(yuǎn)程服務(wù)器加載數(shù)據(jù)。jsonloaderloadFilterfunction(data)返回過(guò)濾后的數(shù)據(jù)并顯示。groupFieldstring指定分組的字段名稱。right案例一：代碼如下:復(fù)制#cc./dist/data/combobox_data.jsonidtexttruetrue/可以使用鍵盤(pán)上的上下鍵來(lái)選中項(xiàng)false/用戶不可以直接輸入文本到字段中。false/定義不顯示向下箭頭按鈕。參考代碼：效果如下圖：Combobox常用方法方法名方法參數(shù)描述optionsnone

11、返回屬性對(duì)象。getDatanone返回加載數(shù)據(jù)。loadDatadata讀取本地列表數(shù)據(jù)。reloadurl請(qǐng)求遠(yuǎn)程列表數(shù)據(jù)。通過(guò)url參數(shù)重寫(xiě)原始URL值。setValuesvalues設(shè)置下拉列表框值數(shù)組。setValuevalue設(shè)置下拉列表框的值。clearnone清除下拉列表框的值。selectvalue選擇指定項(xiàng)。unselectvalue取消選擇指定項(xiàng)。Combobox常用事件事件名事件參數(shù)描述onBeforeLoadparam在請(qǐng)求加載數(shù)據(jù)之前觸發(fā)，返回false取消該加載動(dòng)作。實(shí)現(xiàn)級(jí)聯(lián)下拉列表onLoadSuccessnone在加載遠(yuǎn)程數(shù)據(jù)成功的時(shí)候觸發(fā)。onLoadErrornone在加載遠(yuǎn)程數(shù)據(jù)失敗的時(shí)候觸發(fā)。onSelectrecord在用戶選擇列表項(xiàng)的時(shí)候觸發(fā)。onUnselectrecord在用戶取消選擇列表項(xiàng)的時(shí)候觸發(fā)。HTML代碼：復(fù)制JS代碼：復(fù)制function#cc1./dist/data/oneLevelCategory.jsonidtexttrue/可以使用鍵盤(pán)上的上下鍵來(lái)選中項(xiàng)false/用戶不可以直接輸入文本到字段中。functionvar./dist/data/twoLevelCategory_.json#cc2reloadfunction$(this).combobox(getData)得到所有下拉項(xiàng)/得到第一個(gè)下