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

1、百度文庫讓每個人平等地捉升口我簡單下拉框課程目標(biāo) 了解Combo的基本屬性、方法和事件靈活掌握Combobox的基本操作ComboCombo簡介自泄義下拉框顯示一個可編輯的文本框和下拉而板在html頁面。這是構(gòu)建其他復(fù)雜的組合 部件（如：combobox, combotree, combogrid等）之前需要構(gòu)建的最基本的組件。Combo擴(kuò) 展自ValidateBoxc Combo并不是學(xué)習(xí)的重點(diǎn)只是為后續(xù)的ComboBox、ComboTree及 ComboGrid打基礎(chǔ)。大家簡單了解即可。效果如下圖：Sei ect a languageJavaOc#Ruby BasicFortran開發(fā)Co

2、mbo程序 復(fù)制1. 2. 3. div style二color:# JBBZ8;background:#fafafa;padding:;zSelect a language4. 5. Java.OIX16171819202122232425262728.29.30.C#RubyBasic Fortran$ (function 0 /*當(dāng)點(diǎn)擊刷新按鈕刷新頁而時comb?？丶械闹当粶[除，但是單選 按鈕依然是選中狀態(tài)，所以需要淸除checked屬性*/$(#sp input) removeProp( checked);$( #cc). combo(required:true,e

3、ditable:false)；$( #sp). appendTo($( #cc). combo(* panel );$(#sp input，). click (function 0 var v = $(this). val();var s = $ (this). next ( span*). text 0 ;S (、 #cc ) combo( setValue，, v) comboC setText，, s) co mbo(，hidePanel);)；);參考代碼：效果如上圖。自定義下拉框使用Javascript創(chuàng)建一個select或匕2毗元索。注意:使用自定義下拉框不能通過標(biāo)簽的方式進(jìn)行創(chuàng)建

4、。Combo常用屬性屬性名屬性值類 型描述默認(rèn) 值widthnumber組件的寬度。autoheightnumber組件的高度。22panelWidthnumber下拉而板寬度。nullpanelHeightnumber下拉而板高度。200panelMinWidthnumber下拉而板最小寬度。nullpanelMaxWidthnumber下拉而板最大寬度。nullpanelMinHeightnumber下拉而板最小高度。nullpanelMaxHeightnumber下拉而板最大高度。nullpanelAlignstring面板對齊方式。可用值有：leftright。200multipleb

5、oolean定義是否支持多選。falseselectOnNavigationboolean泄義是否允許使用鍵盤導(dǎo)航來選擇項(xiàng)目。trueseparatorstring在多選的時候使用何種分隔符進(jìn)行分割。9editableboolean泄義用戶是否可以直接輸入文本到字段中。truedisabledboolean設(shè)置啟用/禁用字段。falsereadonlyboolean設(shè)置該字段為讀寫/只讀模式。falsehasDownArrowboolean定義是否顯示向下箭頭按鈕。truevaluestring字段的默認(rèn)值。delaynumber最后一次輸入事件與執(zhí)行搜索之間的延遲間隔（執(zhí) 行自動完成功能的延

6、遲間隔）200keyHandlerobject在用戶按下鍵的時候調(diào)用一個函數(shù)。案例一：代碼如下:復(fù)制S ( #cc ) combo( panelAlign:* right, width：100, panelWidth：300, multiple:true, required:true, editable：false, hasDownArrow:false )；參考代碼: 效果如下圖:|This field is required.Select a languagen 山 bysicrtr Javc#RUBaFO oooooCombo常用方法方法名方法參數(shù)描述optionsnone返回屬性對象。

7、panelnone返回下拉而板對象。textboxnone返回文本框?qū)﹀?。destroynone銷毀該組件。resizewidth調(diào)整組件寬度。showPane1none顯示下拉而板。hidePanelnone隱藏下拉而板。disablenone禁用組件。enablenone啟用組件。readonlymode啟用/禁用只讀模式。validatenone驗(yàn)證輸入的值。isValidnone返回驗(yàn)證結(jié)果。clearnone淸除控件的值。resetnone重置控件的值。getTextnone獲取輸入的文本。setTexttext設(shè)置輸入的文本。getValuesnone獲取組件值的數(shù)組。setVal

8、uesvalues設(shè)置組件值的數(shù)組。getValuenone獲取組件的值。setValuenone設(shè)置組件的值。Combo常用事件事件名事件參數(shù)描述onShowPanelnone當(dāng)下拉面板顯示的時候觸發(fā)。onHidePanelnone當(dāng)下拉面板隱藏的時候觸發(fā)。onChangenewValue, oldValue當(dāng)字段值改變的時候觸發(fā)。ComboboxCombobox 簡介下拉列表框顯示一個可編輯文本框和下拉式列表，用戶可以選擇一個值或多個值。用戶可以直接輸入文本到列表頂部或選擇一個或多個當(dāng)前列表中的值。效果如下圖：AlabamaAlaskaArizonaArkansasCalifornia開發(fā)

9、Combobox程序復(fù)制 A1abamaAlaskaArizonaArkansasCalifornia參考代碼：效果如上圖。Combobox常用屬性屬性名屬性值類型描述默認(rèn)值valueFieldstring基礎(chǔ)數(shù)據(jù)值名稱綁左到該下拉 列表框。valuetextFieldstring基礎(chǔ)數(shù)據(jù)字段需稱綁龍到該下 拉列表框。textgroupFieldstring指定分組的字段名稱。nullgroupFormatterfunction(group)返回格式化后的分組標(biāo)題文 本，以顯示分組項(xiàng)。modestring怎義了當(dāng)文本改變時如何讀取 列表數(shù)據(jù)。localurlstring通過URL加載遠(yuǎn)程列表數(shù)

10、據(jù)。nullmethodstringHTTP方法檢索數(shù)據(jù)(POST / GET)。postdataarray數(shù)據(jù)列表加載。nullfilterfunction定義當(dāng)mode設(shè)置為local 時如何過濾本地?cái)?shù)據(jù)，函數(shù)有2個參數(shù)：q：用戶輸入的文本。row：列表行數(shù)據(jù)。返回true的時候允許行顯zjs oformatterfunction定義如何渲染行。該函數(shù)接受1個參數(shù)：rowoloaderfunction(param, success, error)左義了如何從遠(yuǎn)程服務(wù)器加載 數(shù)據(jù)。json loaderloadFilterfunction(data)返回過濾后的數(shù)據(jù)并顯示。groupFiel

11、dstring指定分組的字段名稱。right案例一：代碼如下:復(fù)制S ( #cc) combobox (23456 7 89.url:/dist/data combobox_data json, valueField：* id, textField：* text,multiple:true,se 1 ectOnNavigation: true, /可以使用鍵盤上的匕下鍵來選中項(xiàng) editable: false,/用閂不可以直接輸入文本到字崗中。 hasDownAr r ow: f al se/ 義不昭示向下箭頭按鈕。)；參考代碼：效果如下圖:JSPrOraclezSpringMVCJavaOr

12、acleJSPSpringMVCMybatisEasyUICombobox常用方法方法名方法參數(shù)描述optionsnone返回屬性對象。getDatanone返回加載數(shù)據(jù)。loadDatadata讀取本地列表數(shù)據(jù)。reloadurl請求遠(yuǎn)程列表數(shù)據(jù)。通過url參數(shù)重寫原始URL值。setValuesvalues設(shè)置下拉列表框值數(shù)組。setValuevalue設(shè)置下拉列表框的值。clearnone淸除下拉列表框的值。selectvalue選擇指定項(xiàng)。unselectvalue取消選擇指定項(xiàng)。Combobox常用事件事件名事件參數(shù)描述onBeforeLoadparam在請求加載數(shù)據(jù)之前觸發(fā)，返回f

13、alse取消該加載動作。onLoadSuccessnone在加載遠(yuǎn)程數(shù)據(jù)成功的時候觸發(fā)。onLoadErrornone在加載遠(yuǎn)程數(shù)據(jù)失敗的時候觸發(fā)。onSelectrecord在用戶選擇列表項(xiàng)的時候觸發(fā)。onUnselectrecord在用戶取消選擇列表項(xiàng)的時候觸發(fā)。實(shí)現(xiàn)級聯(lián)下拉列表HTML代碼：復(fù)制1. 2. JS代碼:復(fù)制1. S(function 02$ ( #ccT ) combobox (3.url:/dist/data/oneLevelCategory json ,4.valueField/ id,5textField: text*,6selectOnNavigation:true

14、,可以使用鍵盤匕的上下鍵來選中項(xiàng)7.editable:false, /川八不可以丨巾入文本P。8.onSelect: function(rec)9.var url = /dist data/twoLevelCategory. + rec id + json;10.$ ( #cc2) combobox ( reload*, url);11.,12.onLoadSuccess:function()13./S(this). combobox(，getData，)得到所有下拉項(xiàng)14.15.得到第一個下拉項(xiàng)16.var rec = $(this) combobox( getData);17.18.設(shè)宜下拉列表默認(rèn)選中第一個下拉項(xiàng)19.$(this) combobox( select ,rec text);20.21./加載#cc2中的內(nèi)容22.9 .var url 二 /dist/data/twoLevelCategoryJ + rec id + jsonf23.$ ( #cc2) combobox ( r