360UI樹形下拉框

我在好久之前曾發佈過一個美化的單選下拉框組件，一度很火爆。相信如今讀我帖子的人裏面仍然有在用這個組件的。

之前那個帖子地址：http://www.iteye.com/topic/851317

此次給你們介紹一款很是好用的樹形下拉框組件：QUI(360UI即QUI)樹形下拉框。

特色1：美化的而且可自定義的外觀

該下拉框使用JS進行渲染。下拉框樣式以下：

該外觀是由CSS和圖片控制。經過修改CSS能夠很方便地實現更改外觀。

QUI樹形下拉框不存在IE6中沒法被浮動層遮住等問題。

特色2：使用簡單

引入腳本和相應的CSS以後， 在頁面寫以下的HTML代碼：

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

而後爲其指定JSON數據便可。數據格式：

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

特色3：控制某些節點不可選

若是但願某些子節點（例如父節點）不可選擇，爲該項JSON數據設置clickExpand:true便可，這樣點擊後不會選中項，而是展開子節點。

 

特色4：觸發close事件

能夠爲selectTree的div添加close事件，每當內容層關閉時會調用。經過這種方式能夠將選中項傳遞給hidden表單元素，用於提交表單

特色5：自定義圖標

下拉框樹結構每一個節點均可以自定義圖標。效果以下：

特色6：寬度處理

QUI樹形下拉框對於寬度的處理方式是：默認會有一個寬度，當樹結構過寬則內容層會增大寬度用於自適應裏面的內容。

還能夠爲下拉框和內容層強制指定一個寬度。效果以下：

特色7：樹形下拉框可編輯

爲下拉框代碼添加一個editable="true"屬性，就把它變成了一個可編輯的下拉框，效果以下：

 

特色8：可經過AJAX方式加載數據

下拉框的樹結構能夠經過ajax方式加載。詳情請參見在線相關示例。

特色9：變成樹形多選下拉框

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

當選擇完畢後，鼠標移入能夠顯示全部選擇的選項提示。效果以下：

特色10：樹形多選下拉框的不分組模式

改變樹形多選下拉框的JSON數據，讓其不分組。那麼就變成一個select多選下拉框。效果以下

特色11：樹形下拉框的驗證

結合QUI框架的驗證機制，能夠方便地爲樹形下拉框添加驗證。效果以下：

特色12：樹形下拉框動態增刪改選項

樹形下拉框支持動態增刪改選項。結合ajax機制能夠方便地實現以下效果：

 

  添加一個節點後的效果：

 

特色13：完美的瀏覽器兼容性

不管是IE6、IE7、IE8、IE9仍是FireFox、Chrome、Safira，甚至在Linux下都保持功能與外觀的一致性。

該select組件最新的下載地址：

http://qui-frame.googlecode.com/files/select.rar

更多組件下載地址：

http://www.360ui.net