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