KoaQiu组件教程之Tree >> 幽幽天空设计欣赏网页设计原创作品

基本使用方法
你只要给个如下格式的XML给Tree组件就可以了

这个XML文件可以自由发挥任意添加属性和节点甚至节点名称都不必是node 但是label是必须的。
我们开始扩展他的功能：
1 修改显示图标
两个方法：
一是直接修改他的主题这方法简单没什么好说的。
二是用“iconFunction”看过番茄的“给List添加图示”的人都应该知道如何使用了首先制作几个图标可以是MC或者是图元尺寸不要太大了,16*16 就太够了一定要记将他们导出然后是脚本：

//图标回调函数
tree.iconFunction=function(a){
//根据节点的属性返回不同的ICON
if(a.attributes.icon!=undefined){
return a.attributes.icon;
}else if(a.attributes.url!=undefined){
return "icon_ie";
}else if(a.nodeName=="node"){
return "icon_folder";
}
}

这代码简单就是根据不同情况返回不同的图标。
2修改节点打开事件
大家一定发现了我们要点击没个节点左边的那个图标才可以打开或关闭该节点很麻烦。方法很简单：

onchange = function(eventObj){
var tmp=eventObj.target.selectedItem;
var open = eventObj.target.getIsOpen(tmp)
eventObj.target.setIsOpen(tmp, !open,true); } tree.addEventListener("change", onchange);

添加以上代码就可以在点击节点标签的时候，打开或关闭该节点了。
3添加滚动条
垂直滚动条好搞一句话就可以了tree.vScrollPolicy = "auto";//设置垂直滚动条自动显示关键是水平滚动条，这句 tree.hScrollPolicy = "on"; 只能设置他显示水平滚动条而不能自动调整是否显示。我经过苦思冥想N天+看了N边代码后写了个小函数搞定了他。

//此函数设置水平滚动条
function sethp() {
var tmp = 0;
for(var k in tree.content_mc){
if(k.indexOf("treeRow")>=0){
var tmpw:Number=tree.content_mc[k].cell.textWidth+tree.content_mc[k].cell._x; //计算水平宽度
if(tmpw>tmp){
tmp=tmpw;
}
}
}
tmp-=180 //减掉的180是Tree的宽200-20 20是垂直滚动条的宽度
if(tmp>0){
tree.hScrollPolicy = "on";
tree.maxHPosition = tmp;
}else{
tree.hScrollPolicy = "off";
}
}

然后在每次打开或关闭节点的时候调用他就可以了

tree.addEventListener("nodeOpen", sethp);
tree.addEventListener("nodeClose", sethp);

最后再来几个小东西

tree.setStyle("openEasing", mx.transitions.easing.Back.easeInOut);//节点打开关闭时的动画效果
tree.setStyle("alternatingRowColors", [0xffffff, 0xF5F8FA]);//行间隔颜色
tree.setStyle("textRollOverColor", 0x0000ff);//看名字应该知道是什么 tree.setStyle("borderStyle", "none");//设置没有边框

效果如下：

[全屏欣赏]