藍橋軟件學院簡單下拉框

1、簡單下拉框課程目標? 了解Combo的基本屬性、方法和事件? 靈活掌握Combobox的基本操作ComboCombo簡介自定義下拉框顯示一個可編輯的文本框和下拉面板在html頁面。這是構建其他復雜的組合部件（如：combobox,combotree,combogrid 等）之前需要構建的最基本的組件。Combo擴展自ValidateBox 。 Combo并不是學習的重點，只是為后續(xù)的ComboBox ComboTree及ComboGrid打基礎。大家簡單了解即可。效果如下圖： 開發(fā) Combo程序復制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 /*當點擊刷新按鈕刷新頁面時combo控件中的值被清除，但是單選按鈕依然是選中狀態(tài)，所以需要清除checked屬性*/#sp inputchecked#cctrue

3、false#sp”#cc”panel#sp in putfun ctio nvarthisvarthis span#ccsetValuesetTexthidePanel參考代碼：效果如上圖。自定義下拉框使用 Javascript 創(chuàng)建一個select或input元素。注意：使用自定義下拉框不能通過標簽的方式進行創(chuàng)建。Combo常用屬性屬性名屬性值類 型描述默認 值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面板對齊方式?？捎弥涤校簂eft,right。200multipleboolea n定義是否支持多選。falseselect OnN avigati onboolea n定義是否允許使用鍵盤導航來選擇項目。trueseparatorstri ng在多選的時候使用何種分隔符進行分割。editableboolea n定

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

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

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

8、圖：開發(fā)Combobox程序復制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常用屬性屬性名屬性值類型描述默認值valueFieldstri ng基礎數(shù)據(jù)值名稱綁定到該下拉 列表框。valuetextFieldstri ng基礎數(shù)據(jù)字段名稱綁定到該下 拉列表框。textgroupField

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

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

11、法參數(shù)描述optio nsnone返回屬性對象。getDatanone返回加載數(shù)據(jù)。loadDatadata讀取本地列表數(shù)據(jù)。reloadurl請求遠程列表數(shù)據(jù)。通過url參數(shù)重寫原始URL值。setValuesvalues設置下拉列表框值數(shù)組。setValuevalue設置下拉列表框的值。clearnone清除下拉列表框的值。selectvalue選擇指定項。un selectvalue取消選擇指定項。Combobox常用事件事件名事件參數(shù)描述on Before Loadparam在請求加載數(shù)據(jù)之前觸發(fā)，返回false取消該加載動作。onLoadSuccessnone在加載遠程數(shù)據(jù)成功的時候

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