快捷導(dǎo)航

jquery插件 autoComboBox 下拉框

更新時(shí)間：2010年12月22日 15:07:12 作者：

大家在做省市區(qū)下拉框聯(lián)動(dòng),或者是產(chǎn)品分類聯(lián)動(dòng),或者是部門聯(lián)動(dòng)等下拉框時(shí)怎么做? 是用ajaxpro.dll 還是jquery ajax呢

問(wèn): 1.大家在做省市區(qū)下拉框聯(lián)動(dòng),或者是產(chǎn)品分類聯(lián)動(dòng),或者是部門聯(lián)動(dòng)等下拉框時(shí)怎么做? 是用ajaxpro.dll 還是jquery ajax呢??
答: 是,留下繼續(xù)閱讀.
否,跟帖回復(fù)你的方法
結(jié)論:每次重復(fù)勞動(dòng) 重復(fù)創(chuàng)造聯(lián)動(dòng)的下拉框, 累,想死!! 讀完本文您也許可以找到更好的方法來(lái)實(shí)現(xiàn) 無(wú)限級(jí)(理論) 的聯(lián)動(dòng)下拉框,也許只要10秒鐘就夠了.
就這樣,一個(gè)自動(dòng)產(chǎn)生聯(lián)動(dòng)下拉框的插件誕生了...
本插件依賴于jquery1.4.2 最低版本自行測(cè)試.
廢話完畢.
代碼:
<div class="zldd-AutoComboBox" id="div_autoComboBox">
</div>
　　調(diào)用方法:

復(fù)制代碼代碼如下:

 
var data= [{ "id": 25, "text": "淮安分公司", "children": [{ "id": 26, "text": "辦公室（行政人事培訓(xùn)）"}] }, { "id": 52, "text": "研發(fā)部" }, { "id": 53, "text": "財(cái)務(wù)部"}] 
$("#div_autoComboBox").AutoComboBox({ 
cssClass: "autoComboBox", 
nullDispaly: true, 
//url: "ComboBoxTreeDept_Data.aspx", 
//如果沒有使用遠(yuǎn)程數(shù)據(jù) 則可以使用本地?cái)?shù)據(jù)源 使用上面定義的data變量 注:如果url不為空時(shí) 優(yōu)先使用遠(yuǎn)程數(shù)據(jù)源 
// ps:只請(qǐng)求一次數(shù)據(jù)庫(kù),數(shù)據(jù)源將存放在客戶端 
data:data, 
firstValue: [true, "==請(qǐng)選擇==", "==請(qǐng)選擇=="] //是否自動(dòng)創(chuàng)建第一個(gè)值 這個(gè)值通常為 請(qǐng)選擇 ,不限等 
}); 

結(jié)果: 這樣就一個(gè)無(wú)限級(jí)(理論) 的聯(lián)動(dòng)下拉框就出來(lái)了.. 如果你拷貝一下以上代碼,修改一下url參數(shù) 10秒鐘夠了吧??? 注:關(guān)于json格式,包括名稱,請(qǐng)自行轉(zhuǎn)換,本源碼也包含一個(gè)只針對(duì)本插件轉(zhuǎn)換json的一個(gè)dll.
(引用后:
///dataset 數(shù)據(jù)源
///要顯示text
///id,, 你懂的
///父id, 你也懂的
///忽略....
string treeJson = zlddEasyUiHelp.CreateTree.DataSetToTree(ds_department, "Dept_Name", "Dept_ID", "Dept_PId",false);
)
問(wèn):我怎么獲取用戶選擇的值.?
答: 一句代碼搞定,并支持多個(gè)參數(shù)重載

復(fù)制代碼代碼如下:

 
$("#div1").ComboBoxGetValue([index],[ErrorFn]); 
//可選參數(shù)說(shuō)明: 
//index,獲取第幾個(gè)下拉框的值,默認(rèn)最后一個(gè)(如果不填寫也是獲取最后一個(gè)值) 
// ErrorFn,獲取值時(shí)遇到錯(cuò)誤 如:假設(shè)現(xiàn)在是省市區(qū)聯(lián)動(dòng),您要獲取第三個(gè)下拉框(區(qū)),但是用戶只選擇到了市,這將會(huì)獲取不到,那么將調(diào)用傳遞進(jìn)去的方法 
//該回調(diào)方法寫法如下: 
var ErrorFn = function () { 
alert("錯(cuò)誤了"); 
} 

看到此處您是否會(huì)用了???如果不會(huì),你懂的,回帖....
接下來(lái)說(shuō)下"修改"功能
如:剛才用戶選擇了自己的地址, 那么現(xiàn)在用戶需要修改,用戶剛才選擇到了"區(qū)",我們要初始化聯(lián)動(dòng)下拉框并且要設(shè)置區(qū),市,省的默認(rèn)值.
很簡(jiǎn)單: 在上面的代碼加一句話(下方紅色標(biāo)注的代碼)就會(huì)自動(dòng)初始化帶默認(rèn)值的聯(lián)動(dòng)下拉框
例:

復(fù)制代碼代碼如下:

 
$("#div_autoComboBox").AutoComboBox({ 
cssClass: "autoComboBox", 
nullDispaly: true, 
//url: "ComboBoxTreeDept_Data.aspx", 
//如果沒有使用遠(yuǎn)程數(shù)據(jù) 則可以使用本地?cái)?shù)據(jù)源 使用上面定義的data變量 注:如果url不為空時(shí) 優(yōu)先使用遠(yuǎn)程數(shù)據(jù)源 
// ps:只請(qǐng)求一次數(shù)據(jù)庫(kù),數(shù)據(jù)源將存放在客戶端 
data:data, 
defaultValue: 76, 
firstValue: [true, "==請(qǐng)選擇==", "==請(qǐng)選擇=="] //是否自動(dòng)創(chuàng)建第一個(gè)值 這個(gè)值通常為 請(qǐng)選擇 ,不限等 
}); 

關(guān)于"修改"功能的誕生背景,有興趣的看...
話說(shuō)本插件是不可以設(shè)置默認(rèn)值的,也就是不能自初始化帶默認(rèn)值的下拉框
但是,由于一個(gè)美女誘惑我,說(shuō)"你要弄出來(lái),我就干嘛嘛",,具體干嘛,各位懂的....
到此介紹完畢
源碼下載,/201012/yuanma/AutoComboBoxs.rar(已更新)

(源碼只包括插件源碼,轉(zhuǎn)換json格式字符串的dll)
2011年1月4日17:12:39更新

版本 v1.1

更新內(nèi)容

修復(fù)部分已知bug(如果子類沒有頂級(jí)選項(xiàng)如"請(qǐng)選擇" 造成第三級(jí)無(wú)法創(chuàng)建的問(wèn)題)

增加獲取選定項(xiàng)對(duì)象的方法

性能的優(yōu)化

原文: http://www.cnblogs.com/337212522/archive/2010/12/21/1912381.html

您可能感興趣的文章: