藍(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ù)的ComboBox ComboTree及ComboGrid打基礎(chǔ)。大家簡(jiǎn)單了解即可。效果如下圖： 開(kāi)發(fā) Combo程序復(fù)制5.in puttype radio5.in puttype radion amela ng6

2、.in puttype radion amela ng7.in puttype radion amela ng8.in puttype radion amela ng9.in puttype radion amela ng10.11.12.scripttype text/javascript13.fun ctio nvalue 01 value 02 value 03 value 04 value 05 TOC o 1-5 h z /*當(dāng)點(diǎn)擊刷新按鈕刷新頁(yè)面時(shí)combo控件中的值被清除，但是單選按鈕依然是選中狀態(tài)，所以需要清除checked屬性*/#sp inputchecked#cctrue

3、false#sp”#cc”panel#sp in putfun ctio nvarthisvarthis span#ccsetValuesetTexthidePanel參考代碼：效果如上圖。自定義下拉框使用 Javascript 創(chuàng)建一個(gè)select或input元素。注意：使用自定義下拉框不能通過(guò)標(biāo)簽的方式進(jìn)行創(chuàng)建。Combo常用屬性屬性名屬性值類 型描述默認(rèn) 值widthnu mber組件的寬度。autoheightnu mber組件的高度。22pan elWidthnumber下拉面板寬度。nullpan elHeightnu mber下拉面板高度。200pan elM in Widthn

4、umber下拉面板最小寬度。nullpan elMaxWidthnu mber下拉面板最大寬度。nullpan elMi nH eightnumber下拉面板最小咼度。nullpan elMaxHeightnu mber下拉面板最大高度。nullpan elAlig nstri ng面板對(duì)齊方式。可用值有：left,right。200multipleboolea n定義是否支持多選。falseselect OnN avigati onboolea n定義是否允許使用鍵盤(pán)導(dǎo)航來(lái)選擇項(xiàng)目。trueseparatorstri ng在多選的時(shí)候使用何種分隔符進(jìn)行分割。editableboolea n定

5、義用戶是否可以直接輸入文本到字段中。truedisabledboolea n設(shè)置啟用/禁用字段。falsereado nlyboolean設(shè)置該字段為讀寫(xiě)/只讀模式。falsehasDow nArrowboolea n定義是否顯示向下箭頭按鈕。truevalue字段的默認(rèn)值。delaynu mber最后一次輸入事件與執(zhí)行搜索之間的延遲間隔（執(zhí) 行自動(dòng)完成功能的延遲間隔）200keyHa ndlerobject在用戶按下鍵的時(shí)候調(diào)用一個(gè)函數(shù)。案例一：代碼如下:復(fù)制1.#cc2.right3.1004.3005.true6.true7.false8.false參考代碼：效果如下圖：Combo常用方

6、法方法名方法參數(shù)描述optio nsnone返回屬性對(duì)象。pan elnone返回下拉面板對(duì)象。textboxnone返回文本框?qū)ο?。destroynone銷毀該組件。resizewidth調(diào)整組件寬度。showPa nelnone顯示下拉面板。hidePa nelnone隱藏下拉面板。disablenone禁用組件。en ablenone啟用組件。reado nlymode啟用/禁用只讀模式。validatenone驗(yàn)證輸入的值。isValidnone返回驗(yàn)證結(jié)果。clearnone清除控件的值。resetnone重置控件的值。getTextnone獲取輸入的文本。setTexttext設(shè)置

7、輸入的文本。getValuesnone獲取組件值的數(shù)組。setValuesvalues設(shè)置組件值的數(shù)組。getValuenone獲取組件的值。setValuenone設(shè)置組件的值。Combo常用事件事件名事件參數(shù)描述on ShowPa nelnone當(dāng)下拉面板顯示的時(shí)候觸發(fā)。onH idePa nelnone當(dāng)下拉面板隱藏的時(shí)候觸發(fā)。on Cha ngen ewValue, oldValue當(dāng)字段值改變的時(shí)候觸發(fā)。ComboboxCombobox 簡(jiǎn)介下拉列表框顯示一個(gè)可編輯文本框和下拉式列表，用戶可以選擇一個(gè)值或多個(gè)值。用戶可 以直接輸入文本到列表頂部或選擇一個(gè)或多個(gè)當(dāng)前列表中的值。效果如下

8、圖：開(kāi)發(fā)Combobox程序復(fù)制1.vselectclass1.vselectclass2.opti onvalue1 3.opti onvalue1 4.opti onvalue1 5.opti onvalue1 6.opti onvalue7.easyui-combobox AL AK AZ AR CAnamestate style 200px參考代碼：效果如上圖。Combobox常用屬性屬性名屬性值類型描述默認(rèn)值valueFieldstri ng基礎(chǔ)數(shù)據(jù)值名稱綁定到該下拉 列表框。valuetextFieldstri ng基礎(chǔ)數(shù)據(jù)字段名稱綁定到該下 拉列表框。textgroupField

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

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

11、法參數(shù)描述optio nsnone返回屬性對(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)。un selectvalue取消選擇指定項(xiàng)。Combobox常用事件事件名事件參數(shù)描述on Before Loadparam在請(qǐng)求加載數(shù)據(jù)之前觸發(fā)，返回false取消該加載動(dòng)作。onLoadSuccessnone在加載遠(yuǎn)程數(shù)據(jù)成功的時(shí)候

12、觸發(fā)。on LoadErrornone在加載遠(yuǎn)程數(shù)據(jù)失敗的時(shí)候觸發(fā)。on Selectrecord在用戶選擇列表項(xiàng)的時(shí)候觸發(fā)。onUn selectrecord在用戶取消選擇列表項(xiàng)的時(shí)候觸發(fā)。實(shí)現(xiàn)級(jí)聯(lián)下拉列表HTML代 碼： 復(fù)制JS代碼：復(fù)制fun ctio n#cc1./dist/data/on eLevelCategory.js onidtexttrue /可以使用鍵盤(pán)上的上下鍵來(lái)選中項(xiàng)false /用戶不可以直接輸入文本到字段中。fun ctio nvar ./dist/data/twoLevelCategory_.json#cc2reloadfunction$(this).combobox(getData)得到所有下拉項(xiàng)/得到第一個(gè)下拉項(xiàng)vart