`
shlei
  • 浏览: 287916 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Flex AdvancedDataGrid分层数据显示

    博客分类:
  • FLEX
 
阅读更多
Adobe TourDeFlex只有分组数据的Example,而分层数据却没有相应Example,现贴出来XML和ArrayCollection两种数据源的使用方法,供大家参考,:)
<?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" 
			   minWidth="955" minHeight="600">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center"/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;

			[Bindable]
			private var attributes:XML=<att name="Hostname 192.168.1.94" value="">
				                      <categories>
										  <item name="Hostname" value="Hostname"/>
										  <att name="Hostname 192.168.1.94"  value="NET1" >
											<categories>
										    <item name="Name" value="NET1"/>
										    <item name="Network Mask" value=""/>
										    <item name="Network IP Address" value=""/>
										    <item name="Icon" value="network"/>
											</categories>
										  </att>
										  <item name="Icon" value="ci"/>
										  <item name="Interface Vendor" value="NMAP_Network-2392660"/>
										  <item name="MAC Address" value="00:1F:D0:57:DB:A9"/>
										  <item name="IPV6 Address" value=""/>
										  <item name="IPV4 Address" value="192.168.1.94"/>
										</categories>
										</att>;
		
			[Bindable] 
			private var dpHierarchy:ArrayCollection = new ArrayCollection([  
				{Region:"TCP3399", categories: [  
					{Name:"Icon", Value:38865},  
					{Name:"Service Name", Value:30000},
					{Region:"Host",Value:'host Name 192.168.1.5', categories: [  
						{Name:"Host Name", Value:44985},  
						{Region:"NetWork",Value:"啥子主机哟?",categories:[
							{Name:"Name", Value:12333},
							{Name:"Network Mask", Value:'哈哈'},
							{Name:"Network IpAddress", Value:'测试下看看'},
							{Name:"Icon", Value:'我也不知道是啥图标啊'}
						]},
						{Name:"Icon", Value:44913},
						{Name:"Interface Vender", Value:44913},
						{Name:"Mac Address", Value:'ae-ds-32-34-23'},
						{Name:"IpV6 Address", Value:'192.168.12.23.23.159'},
						{Name:"IpV4 Address", Value:'192.168.1.5'}]},
					{Name:"Protocol", Value:10},
					{Name:"Portal", Value:380}]}				
			]);
			
			/**
			 * 返回对象属性
			 */
			private function adgLabelFunc(item:Object, column:AdvancedDataGridColumn):String
			{  
				return item.Region;  
			}
			
			/**
			 * 改变数据源
			 */
			protected function dataChangeBTN_clickHandler(event:MouseEvent):void
			{
				if(hd.source is XML)
				{
					hd.source=dpHierarchy;
					ciADG.columns[0].dataField="Name";
					ciADG.columns[1].dataField="Value";
					ciADG.groupLabelFunction=adgLabelFunc;//分组标签返回函数
				}
				else
				{
					hd.source=attributes;
					ciADG.columns[0].dataField="@name";
					ciADG.columns[1].dataField="@value";
				}
			}

		]]>
	</fx:Script>
	
	<s:Button id="dataChangeBTN" label="改变数据源" click="dataChangeBTN_clickHandler(event)"/>
	<mx:AdvancedDataGrid id="ciADG" 
						 width="500" height="500" 
						 contentBackgroundColor="0x999999" 
						 headerColors="[0xaaaaaa,0xcccccc]"
						 displayItemsExpanded="true"
						 selectedIndex="0"
						 >
		<mx:dataProvider>
			<mx:HierarchicalData id="hd" source="{attributes}" childrenField="categories"/>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn headerText="名称" dataField="@name"/>
			<mx:AdvancedDataGridColumn headerText="值" dataField="@value"/>
			<mx:AdvancedDataGridColumn dataField="Region" width="0"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</s:Application>
  • 大小: 18.5 KB
  • 大小: 26.3 KB
分享到:
评论

相关推荐

    Flex应用AdvancedDataGrid表头皮肤

    在Flex开发中,AdvancedDataGrid组件是用于展示大量复杂数据的高级网格控件。它提供了比基本DataGrid更丰富的功能,如多级表头、排序、分组、过滤和自定义渲染等。本文将深入探讨Flex应用中的AdvancedDataGrid表头...

    FLEX AdvancedDataGrid 复选框

    在IT行业中,AdvancedDataGrid是Flex(Adobe Flex)框架中一个强大的数据网格组件,用于显示大量结构化的数据。它提供了高级的数据呈现功能,比如分组、排序、过滤和自定义渲染。本文将深入探讨“FLEX ...

    Flex技术中AdvancedDataGrid使用方法

    为了更有效地展示具有层级关系的数据,`AdvancedDataGrid`提供了一种显示分层数据的方式。通过在第一列显示一个可展开和折叠的导航树来控制表格中各层级数据的显示。 **实现步骤:** 1. **定义数据源:** 需要定义...

    flex advancedDataGrid 中如何实现带checkbox的树

    在Flex开发中,AdvancedDataGrid组件是一个功能强大的数据网格,它可以显示层次结构的数据,并提供了丰富的定制选项。在一些应用场景中,我们可能需要在AdvancedDataGrid中实现带有复选框的树形结构,以便用户可以...

    flex AdvancedDataGrid实现checkBox全选功能

    在Flex开发中,AdvancedDataGrid是一款强大的数据网格组件,它提供了丰富的数据展示和交互功能,如排序、分组、过滤等。在实际应用中,我们经常需要为用户提供选择多条数据的能力,这时CheckBox的选择功能就显得尤为...

    flex 使用AdvancedDataGrid组件的课件管理系统

    在Flex开发环境中,AdvancedDataGrid组件是一个强大的数据展示工具,尤其适用于处理大量复杂数据的网格显示。本课件管理系统就是基于这个组件构建的,旨在提供一个基础的平台,用于管理和浏览课件信息。下面将详细...

    flex-datagrid-advancedDataGrid-demo

    在Flex编程领域,数据网格(DataGrid)是用于展示大量结构化数据的组件,而AdvancedDataGrid则是DataGrid的一个增强版,提供了更为丰富的功能和更高级的定制能力。本示例"flex-datagrid-advancedDataGrid-demo"显然...

    AdvancedDataGrid综合应用

    与简单的DataGrid相比,AdvancedDataGrid提供了更多高级特性,包括分层数据视图、多列排序、自定义布局和样式、拖放功能以及对大数据集的支持。 2. **分层数据视图** AdvancedDataGrid支持树形结构数据,可以显示...

    flex导出excel的代码

    Alert.show("行的数据分别是:"+o.idx+"/"+o.names+"/"+o.sex); } private var sheet:Sheet; private function onCreate():void { var excelFile:ExcelFile = new ExcelFile(); sheet = new Sheet...

    Flex 全选效果 批量删除

    在Flex编程中,AdvancedDataGrid和DataGrid是两种常用的组件,用于展示数据并提供交互功能。本示例项目“Flex全选效果批量删除”聚焦于如何实现这些组件的一个实用功能,即用户可以通过全选复选框来一次性选择多个...

    表格演示(1)AdvancedDataGrid应用

    对于分层数据展示,AdvancedDataGrid支持Grouping功能,可以通过设置groupField属性来指定按哪个字段进行分组。分组后,数据会按照指定的字段值进行折叠和展开,方便用户浏览大量信息。同时,AdvancedDataGrid还允许...

    Flex中AdvancedDataGrid的用法示例介绍

    在Flex开发中,AdvancedDataGrid组件是一个常用的显示表格数据的组件,其功能比基础的DataGrid组件更为强大,支持更加复杂的数据显示需求,例如显示多层表头、支持拖拽排序等。在某些情况下,当需要展示具有复杂数据...

    Flex dataGrid 自定义显示列

    本篇文章将深入探讨Flex中的数据Grid组件以及如何自定义显示列,这对于提升用户体验和增强数据展示功能至关重要。 Flex DataGrid是MXML组件库中的一个控件,它允许开发者以网格形式展示数据集合。这种组件特别适用...

    AdvancedDataGrid 动态添加节点 控制树

    在Flex开发中,AdvancedDataGrid是一个强大的组件,用于展示大量数据并进行复杂的数据操作,如分组、排序和过滤。这个组件特别适用于构建数据密集型的用户界面,尤其是在需要显示层次结构数据时。本篇文章将深入探讨...

    AdvancedDataGrid或datagrid导出到excel.rar

    AdvancedDataGrid或datagrid导出到excel.rar AdvancedDataGrid或datagrid导出到excel.rar AdvancedDataGrid或datagrid导出到excel.rar

    AdvancedDataGrid动态加载.rar

    在Flex 3中,AdvancedDataGrid控件是一个强大的数据展示组件,特别适合处理大量数据集。这个"AdvancedDataGrid动态加载.rar"压缩包文件显然包含了能够直接运行的代码示例,用于演示如何实现AdvancedDataGrid的动态...

    AdvancedDataGrid多表头与树形表格(数据统计)

    总的来说,AdvancedDataGrid是一个强大的工具,它提供了丰富的功能来满足复杂的数据显示需求。通过掌握多表头和树形表格的实现,开发者可以创建出交互性强、易用性高的数据统计界面,提高用户体验。在实际工作中,应...

    flex 合并单元格

    与DataGrid相比,它提供了更强大的功能,如分层数据支持、多级表头、排序、过滤以及单元格合并等。 2. **单元格合并的原理** 在Flex中,单元格合并是通过定义数据提供器(dataProvider)中的数据项来实现的。当两...

    flex css设计器

    Flex CSS设计器是一款基于Flash技术的工具,专门用于帮助开发者对Flex应用程序中的用户界面控件进行CSS样式设计。这款工具提供了一个可视化的环境,使得设计师和开发者能够更直观、便捷地调整Flex控件的外观和布局,...

Global site tag (gtag.js) - Google Analytics