论坛首页 编程语言技术论坛

Flex AdvancedDataGrid分层数据显示

浏览 3906 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-06-30   最后修改:2011-07-01
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
论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics