mx:Tree改变父节点与子节点的样式
来源:互联网 发布:软件使用说明模板 编辑:程序博客网 时间:2024/06/28 10:19
项目的需要把Tree的父节点与子节点的样式进行区分,效果如图:
主程序代码:
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:appWidgets="appWidgets.*"> <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.events.FlexEvent; import mx.events.ListEvent; [Bindable] public var selectedNode:XML; protected function myTree_changeHandler(event:ListEvent):void { // TODO Auto-generated method stub selectedNode=Tree(event.target).selectedItem as XML; var itemIsBranch:Boolean=myTree.dataDescriptor.isBranch(myTree.selectedItem); Alert.show(selectedNode.@label+" "+itemIsBranch.toString() ); } private function tree_labelFunc(item:XML):String{ var returnLabel:String=item.@label;// var itemIsBranch:Boolean=myTree.dataDescriptor.isBranch(item);// if(itemIsBranch){// return returnLabel+=" (BRANCH)"; // } if(myTree.dataDescriptor.hasChildren(item)){ returnLabel+=" (含有"+myTree.dataDescriptor.getChildren(item).length+"条内容)"; } return returnLabel; } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> <fx:XMLList id="treeData"> <node label="Inbox"> <node label="Marketing"/> <node label="日本不宣战,可免受国际法制约,继续从美国进口军需品"/> <node label="Personal"/> </node> <node label="古迹建筑"> <node label="天南地北天南地北天南地北天南地北"/> <node label="Personal alskdjflajsdlfjalsjdfldfasdfsdf"/> </node> <node label="Spam"/> <node label="Sent"/> <node label="水域风观"> <node label="天南地北天南地北天南地北天南地北天南地北天南地北天南地北天南地北"/> <node label="Personal alskdjflajsdlfjalsjdfldfasdfsdf"/> </node> </fx:XMLList> </fx:Declarations> <mx:Tree id="myTree" width="300" height="400" textAlign="left" labelField="@label" dataProvider="{treeData}" change="myTree_changeHandler(event)" labelFunction="tree_labelFunc" wordWrap="true" variableRowHeight="true" depthColors="[#F1F9FF,#FFFFFF]" itemRenderer="appWidgets.MyTreeItemRenderer"/> </s:Application>
MyTreeItemRenderer代码如下:
package appWidgets{ import mx.controls.treeClasses.TreeItemRenderer; import mx.controls.treeClasses.TreeListData; public class MyTreeItemRenderer extends TreeItemRenderer { public function MyTreeItemRenderer() { super(); } override public function set data(value:Object):void{ super.data=value; if(TreeListData(super.listData).hasChildren){ setStyle("color",0x343434); setStyle("fontWeight","bold"); setStyle("fontSize",13); } else{ setStyle("color",0x009900); } } }}
总结:
1、利用项呈示器ItemRenderer来载入样式,继承TreeItemRenderer
2、wordWrap使过长的文本自动换行
3、variableRowHeight="true" 使行高自动适应
4、depthColors按等级来显示背景色
5、dataDescriptor 属性返回ITreeDataDescriptor接口,提供用于对 Tree 控件显示的数据集合执行分析和添加节点操作的方法的接口。
此接口含有hasChildren, isBranch方法用来判断是否含有子节点
参考:
http://blog.minidx.com/2008/12/26/1829.html
http://blog.minidx.com/2008/11/01/1597.html
0 0
- mx:Tree改变父节点与子节点的样式
- flex mx:Tree改变父节点与子节点的样式
- easyui tree获取子节点的父节点
- 子节点的位置与父节点位置的关系
- ztree 的 父节点与子节点的关系
- d-heap的子节点与父节点关系
- EasyUI tree 选中父节点子节点全部选中,选中子节点父节点不选中
- 子节点与父节点错误总结
- 动态改变子节点下面的class
- cocos2dx 设置父节点的显隐不能改变子节点的问题
- flex tree 显示子节点的个数
- EasyUI tree子节点的遍历
- Extjs tree 实现父节点和子节点联动
- easyui tree 子节点选中时,父节点也选中
- 父节点获取子节点的字符串
- 实现单击tree的子节点得到其所有父节点的id呢
- Extjs4中tree组件子节点和父节点的级联操作
- Extjs4中tree组件查找所有父节点和查找所有子节点的递归方法
- 杭电2024 C语言合法标识符
- Reviewboard2.0以上版本真心不好用
- [译] React 入门指南
- 【基础练习】【栈】codevs2058 括号匹配题解
- Code Complete读书(六)-可以工作的类
- mx:Tree改变父节点与子节点的样式
- 设计模式的六大原则
- easyui js 上传图片加预览功能
- 5.0新特性RecyclerView
- iOS-Categories/IOS-Categories/Foundation/NSDictionary/NSDictionary+SafeAccess.m
- 编程之美之程序理解和时间分析
- 数据库报错——check the manual that corresponds to your MySQL server version for the right
- 《c++ primer》 习题3.7-3.10
- linux下Apache的简单操作