我在很久以前曾發(fā)布過(guò)一個(gè)美化的單選下拉框組件，一度很火爆。相信現(xiàn)在讀我帖子的人里面仍然有在用這個(gè)組件的。

這次給大家介紹一款非常好用的樹形下拉框組件：QUI樹形下拉框。

特點(diǎn)1：美化的并且可自定義的外觀

該下拉框使用JS進(jìn)行渲染。下拉框樣式如下：

該外觀是由CSS和圖片控制。通過(guò)修改CSS可以很方便地實(shí)現(xiàn)更改外觀。

QUI樹形下拉框不存在IE6中無(wú)法被浮動(dòng)層遮住等問(wèn)題。

特點(diǎn)2：使用簡(jiǎn)單

引入腳本和相應(yīng)的CSS之后， 在頁(yè)面寫如下的HTML代碼：

<div class="selectTree" treeType="ztree" id="sel01"><ul id="treeDemo" class="ztree"></ul></div>

然后為其指定JSON數(shù)據(jù)即可。數(shù)據(jù)格式：

var zNodes1 =[{ id:1, pId:0, name:"父節(jié)點(diǎn)1",open:true},{ id:11, pId:1, name:"葉子節(jié)點(diǎn)11"},{ id:12, pId:1, name:"葉子節(jié)點(diǎn)12"},{ id:13, pId:1, name:"葉子節(jié)點(diǎn)13"},{ id:2, pId:0, name:"父節(jié)點(diǎn)2 ",open:true},{ id:211, pId:2, name:"葉子節(jié)點(diǎn)21"},{ id:212, pId:2, name:"葉子節(jié)點(diǎn)22"},{ id:213, pId:2, name:"葉子節(jié)點(diǎn)23"},{ id:214, pId:2, name:"葉子節(jié)點(diǎn)24"}];

 特點(diǎn)3：控制某些節(jié)點(diǎn)不可選

如果希望某些子節(jié)點(diǎn)（例如父節(jié)點(diǎn)）不可選擇，為該項(xiàng)JSON數(shù)據(jù)設(shè)置clickExpand:true即可，這樣點(diǎn)擊后不會(huì)選中項(xiàng)，而是展開子節(jié)點(diǎn)。

可以為selectTree的div添加close事件，每當(dāng)內(nèi)容層關(guān)閉時(shí)會(huì)調(diào)用。通過(guò)這種方式可以將選中項(xiàng)傳遞給hidden表單元素，用于提交表單。 

特點(diǎn)5：自定義圖標(biāo)

下拉框樹結(jié)構(gòu)每個(gè)節(jié)點(diǎn)都可以自定義圖標(biāo)。效果如下：
 

特點(diǎn)6：寬度處理

QUI樹形下拉框?qū)τ趯挾鹊奶幚矸绞绞牵耗J(rèn)會(huì)有一個(gè)寬度，當(dāng)樹結(jié)構(gòu)過(guò)寬則內(nèi)容層會(huì)增大寬度用于自適應(yīng)里面的內(nèi)容。

還可以為下拉框和內(nèi)容層強(qiáng)制指定一個(gè)寬度。效果如下：

特點(diǎn)7：樹形下拉框可編輯

為下拉框代碼添加一個(gè)editable="true"屬性，就把它變成了一個(gè)可編輯的下拉框，效果如下：

下拉框的樹結(jié)構(gòu)可以通過(guò)ajax方式加載。詳情請(qǐng)參見(jiàn)在線相關(guān)示例。

 特點(diǎn)9：變成樹形多選下拉框

為下拉框添加multiMode="true"屬性，可以把它變成樹形多選下拉框。效果如下：

當(dāng)選擇完畢后，鼠標(biāo)移入可以顯示所有選擇的選項(xiàng)提示。效果如下：

 特點(diǎn)10：樹形多選下拉框的不分組模式

改變樹形多選下拉框的JSON數(shù)據(jù)，讓其不分組。那么就變成一個(gè)select多選下拉框。效果如下：

結(jié)合QUI框架的驗(yàn)證機(jī)制，可以方便地為樹形下拉框添加驗(yàn)證。效果如下：

樹形下拉框支持動(dòng)態(tài)增刪改選項(xiàng)。結(jié)合ajax機(jī)制可以方便地實(shí)現(xiàn)如下效果：

添加一個(gè)節(jié)點(diǎn)后的效果：
 

特點(diǎn)13：完美的瀏覽器兼容性

無(wú)論是IE6、IE7、IE8、IE9還是FireFox、Chrome、Safira，甚至在Linux下都保持功能與外觀的一致性。