有没有办法为zTree的treeNode添加class

1. 设置图标，我更推荐使用 iconSkin 方式，这个可以参考 Demo 2. 针对节点增加 class 请利用 onNodeCreated 回调，捕获 DOM 创建完毕的回调，然后利用 zTree 的规则找到 treeNode.tId + "_a" 这样的 标签，自行添加 class 就是了

修改tree节点的图标的步骤如下：

首先，在src下建立一个assets文件夹，放几张图片；

其次，编写代码如下：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="14" layout="absolute">

<mx:Script>

<![CDATA[

[Embed(source="assets/boy.jpg")]

public var boyIcon:Class

[Embed(source="assets/girl.jpg")]

public var girlIcon:Class

// 根据结点的属性设置节点图标

private function SetIcon(item:Object):*

{

var xml:XML = item as XML

if(xml.attribute("sex")=="boy")

{

return boyIcon

}

else

{

return girlIcon }

}

// Tree控件的数据源

[Bindable]

public var departmentTree:XML=

<member name="小李" sex="boy">

<member name="王志" sex="boy">

<member name="赵强" sex="boy" />

<member name="李丽" sex="girl" />

</member>

<member name="韩梅梅" sex="girl">

<member name="孙艳" sex="girl"/>

</member>

</member>

]]>

</mx:Script>

<mx:Tree x="216" y="0" width="318"

height="450" id="treeXml"

dataProvider="{departmentTree}" labelField="@name"

showDataTips="true" iconFunction="SetIcon" />

</mx:Application>

最后，运行效果即可。

样式定义在metro.css文件里（或者是zTreeStyle.css……），其中可加载单个的图片，也可以从一张图片中根据坐标获取我们要用的图形。对metro.css比较重要的一个图片是metro.png，在图片中每个小方格是5px，在css中加载时按照横纵坐标进行图标的获取。

在ztree中，css主要用了两种方式来加载图标。第一种：根据背景图，图标大小，和坐标位置

第二种：直接加载图片

这两种方式，第二种比较常用，但是对于数据量大的情况，第一种方法貌似更好。对于我们想要修改的元素，可以先在网页中定位一下，找到它具体的class，然后来这里更改就可以了。

3.Bootstrap风格装饰ztree

以最近很流行的Bootstrap为例，给ztree装饰成Bootstrap的风格。上边我们已经分析过ztree是如何设定样式，这里我们只需要任选其一做更改就行了，鉴于它使用了大量以背景图片为基础的图标设定，我们最好还是设定成直接加载图片的比较方便，要不然改的数据太多了……

1）ztree也有黑白色的css、png成套的样式设置，为了更符合Bootstrap的图标样式，让它替换掉原有的css文件和彩色图标

如果页面框架是Bootstrap的，则在显示的时候根节点的图标是“破碎”的，经过查找发现，是根节点图标位置受到Bootstrap的影响，在css文件中找到设置它的位置，进行坐标更改

2）上边的步骤只能算是在ztree内部设定，还不算加上Boostrap的风格。不过，我们只需要再给它更换一个图标，看起来就有那么点味道了（为了展示方便，进行了换行处理）

这样就是另一种风格了，如果你想要自定义其它风格，根据上边的demo来做，应该不算什么难事了。

小结：

ztree中有自定义图标的方法，但是在遇到图标显示不完整的时候还是没办法解决，最后更改了css文件才让图标显示完整。在解决这个问题的过程中了解了ztree图标的加载过程，所有顺便练练手，直接从CSS来给ztree换了个风格。

---