特点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下都保持功能与外观的一致性。
声明：本组件内部的树结构采用的是zTree组件，感谢zTree组件作者的支持与授权。
**QUI 树形下拉框组件详解**
QUI 树形下拉框是一款强大的前端组件，它结合了下拉框和树形结构的功能，提供了一系列丰富的特性，使得在网页设计中可以实现美观且易于操作的选择器。以下是该组件的详细特点：
1. **美化的自定义外观**：该组件使用 JavaScript 渲染，其样式由 CSS 和图片控制。用户可以通过修改 CSS 文件轻松调整下拉框的外观。而且，QUI 树形下拉框解决了 IE6 中浮动层遮挡问题，确保了在各种浏览器下的良好展示。
2. **简单易用**：在页面上添加特定的 HTML 代码，如 `<div class="selectTree" treeType="ztree" id="sel01">...</div>`，并引入对应的脚本和 CSS 文件，然后提供 JSON 数据来构建树形结构。JSON 数据例子如下：
```javascript
var zNodes1 = [
{ id:1, pId:0, name:"父节点1",open:true},
// ...
];
```
3. **控制节点可选性**：通过在 JSON 数据中设置 `clickExpand:true`，可以使得某些节点（如父节点）点击后仅展开而不被选中。
4. **触发 close 事件**：可以监听 selectTree 的 `close` 事件，当内容层关闭时执行相关操作，比如将选中的项传递给隐藏的表单字段以备提交。
5. **自定义图标**：每个树形结构的节点都可以设置自定义图标，提供了更多的个性化定制可能。
6. **宽度处理**：组件有自动适应内容宽度的机制，同时也可以手动设置下拉框和内容层的宽度。
7. **可编辑的下拉框**：通过添加 `editable="true"` 属性，可以将下拉框转变为可编辑状态。
8. **AJAX 动态加载数据**：树形结构的数据可以通过 AJAX 方式异步加载，提高用户体验。
9. **树形多选下拉框**：添加 `multiMode="true"` 属性，可以实现多选功能，选中项在鼠标悬停时会显示。
10. **不分组模式**：通过调整 JSON 数据，可以将树形多选下拉框变为不分组的多选下拉框。
11. **验证功能**：结合 QUI 框架的验证机制，可以方便地为树形下拉框添加验证规则。
12. **动态增删改选项**：组件支持动态地添加、删除或修改树形结构中的选项，通过 AJAX 实现数据交互。
13. **广泛兼容性**：QUI 树形下拉框兼容多种浏览器，包括 IE6 至 IE9，以及 FireFox、Chrome、Safari，并在 Linux 下同样表现稳定。
组件内部采用了 zTree 组件作为树结构的基础，感谢 zTree 作者的授权和支持。用户可以在线查看示例，也可以下载整个 QUI 框架以获取更多组件。
QUI 树形下拉框是一个强大且灵活的前端组件，适用于需要展示复杂层次结构选择的场景，其易用性、定制性和良好的浏览器兼容性使其成为网页开发中的理想选择。
