`

Flex AdvancedDataGrid 列分组功能

    博客分类:
  • Flex
阅读更多

 

问题:

        在ADG的数据源的顶层数据有两列数据显示某人的家庭地址和工作地址,但是这位同志的儿子在家上班(或者说家庭地址和工作地址一样),我们不希望在两列显示相同的地址,而是让地址跨两列显示。

 

解决方案:

        使用ADG的特殊功能(列分组),把列相同的合并为一组显示,而不是在每列显示相同的数据。

 

 

1、未分组前

 

 

<?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" creationComplete="application1_creationCompleteHandler(event)">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.HierarchicalData;
			import mx.events.FlexEvent;
			
			//children为array,指出DataGrid的层级关系
			public var dp:ArrayCollection = new ArrayCollection([
				{name:"jobs",sex:"man",homeAddress:"New jersey",workAddress:"Nevada",email:"jobs@gmail.com"}
				,{name:"marry",sex:"woman",homeAddress:"Mississippi",workAddress:"Montana",email:"marry@gmail.com"}
			]);
			
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
			
				var childrens:Array = new Array();
				childrens.push({name:"tom",homeAddress:"Indiana",sex:"man",email:"tom@gmail.com"});
				dp.getItemAt(0).children = childrens;   //children 指定层级关系
				
				childrens = new Array();
				childrens.push({name:"laly",homeAddress:"Indiana",sex:"woman",email:"laly@gmail.com"});
				dp.getItemAt(1).children = childrens;
				
				var fd:HierarchicalData = new HierarchicalData;
				fd.source = dp;
				dd.dataProvider = fd;
				
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<mx:AdvancedDataGrid id="dd" width="100%" height="100%">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="name" headerText="姓名" />
			<mx:AdvancedDataGridColumn dataField="sex" headerText="性别" />
			<mx:AdvancedDataGridColumn dataField="homeAddress" headerText="家庭地址"  id="address"/>
			<mx:AdvancedDataGridColumn dataField="workAddress" headerText="工作地址" />
			<mx:AdvancedDataGridColumn dataField="email" headerText="邮箱" />
		</mx:columns>
	</mx:AdvancedDataGrid>
</s:Application>
 

 

  显示效果:

 


 

 

 

2、列分组后

 

 

<?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" creationComplete="application1_creationCompleteHandler(event)">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.HierarchicalData;
			import mx.events.FlexEvent;
			
			//children为array,指出DataGrid的层级关系
			public var dp:ArrayCollection = new ArrayCollection([
				{name:"jobs",sex:"man",homeAddress:"New jersey",workAddress:"Nevada",email:"jobs@gmail.com"}
				,{name:"marry",sex:"woman",homeAddress:"Mississippi",workAddress:"Montana",email:"marry@gmail.com"}
			]);
			
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
			
				var childrens:Array = new Array();
				childrens.push({name:"tom",homeAddress:"Indiana",sex:"man",email:"tom@gmail.com"});
				dp.getItemAt(0).children = childrens;   //children 指定层级关系
				
				childrens = new Array();
				childrens.push({name:"laly",homeAddress:"Indiana",sex:"woman",email:"laly@gmail.com"});
				dp.getItemAt(1).children = childrens;
				
				var fd:HierarchicalData = new HierarchicalData;
				fd.source = dp;
				dd.dataProvider = fd;
				
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<mx:AdvancedDataGrid id="dd" width="100%" height="100%">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="name" headerText="姓名" />
			<mx:AdvancedDataGridColumn dataField="sex" headerText="性别" />
			<mx:AdvancedDataGridColumn dataField="homeAddress" headerText="家庭地址"  id="address"/>
			<mx:AdvancedDataGridColumn dataField="workAddress" headerText="工作地址" />
			<mx:AdvancedDataGridColumn dataField="email" headerText="邮箱" />
		</mx:columns>
		
		<mx:rendererProviders>
		    <!--column 指定渲染的列可以使用id,亦可指定columnIndex(从0开始) ; columnSpan指定跨度 ; depth指定深度(从1开始),这里我们为子类也就是第二层指定渲染器 -->
			<mx:AdvancedDataGridRendererProvider column="{address}" 
												 columnSpan="2"
												 depth="2"
												 renderer="com.google.test.TestRender"/> 
		</mx:rendererProviders>
	</mx:AdvancedDataGrid>
</s:Application>
 

   渲染器TestRender.mxml

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
								  xmlns:s="library://ns.adobe.com/flex/spark" 
								  xmlns:mx="library://ns.adobe.com/flex/mx" 
								  focusEnabled="true">
	<s:Label id="lblData"  width="100%" textAlign="center" text="{data.homeAddress}" />
</s:MXAdvancedDataGridItemRenderer>
  

 

  显示效果

 

 


 

 

 

  • 大小: 7.3 KB
  • 大小: 6.6 KB
分享到:
评论

相关推荐

    Flex应用AdvancedDataGrid表头皮肤

    2. **表头元素**:AdvancedDataGrid的表头由多个元素组成,包括ColumnHeader(列头)、SortIndicator(排序指示器)、GroupIndicator(分组指示器)等。通过修改这些元素的外观属性,如颜色、字体、边框、背景图像等...

    FLEX AdvancedDataGrid 复选框

    总之,“FLEX AdvancedDataGrid 复选框”涉及了Flex组件定制、数据绑定、事件处理、状态管理等多个方面,是提高用户交互性和功能性的关键技术。通过理解并应用这些知识,开发者可以构建出更加强大且易用的数据展示...

    flex AdvancedDataGrid实现checkBox全选功能

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

    Flex技术中AdvancedDataGrid使用方法

    `AdvancedDataGrid`允许将多个列分组到同一个列头下,从而简化界面布局,并让用户能够更方便地对数据进行分组操作。 **实现步骤:** 1. **定义分组列:** 创建一个`AdvancedDataGridColumn`实例作为分组列。 2. **...

    flex advancedDataGrid 中如何实现带checkbox的树

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

    AdvancedDataGrid多层分组表头导出Excel与后台JAVA交互

    在Flex或ActionScript中,我们可以使用AdvancedDataGrid的groupField属性来指定分组字段,使用headerStyleName和headerDataGridStyleName来定制表头的样式。 当用户点击导出按钮时,我们需要捕获当前的视图状态,...

    flex DataGrid 表头分组

    总的来说,Flex DataGrid的表头分组功能增强了数据展示的可读性和交互性,是处理复杂数据集时非常有用的工具。通过合理配置数据源、定义数据提供者、设置分组字段以及定制样式,我们可以创建出高效且直观的数据网格...

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

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

    flex-datagrid-advancedDataGrid-demo

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

    AdvancedDataGrid综合应用

    在Flex开发中,AdvancedDataGrid是一个强大的组件,它扩展了基本的DataGrid,提供了更复杂的数据展示和交互功能。这个主题涵盖了如何在Flex项目中有效地利用AdvancedDataGrid来实现数据的高级显示和操作。 1. **...

    Flex--AdvanceDataGrid(列头筛选功能,含ComboBox列、Button列、Checkbox列等)

    在Flex开发中,AdvancedDataGrid(ADG)是高级数据网格组件,相比普通的DataGrid,它提供了更丰富的功能,如分组、排序、多级表头以及更复杂的列类型。在"Flex--AdvanceDataGrid(列头筛选功能,含ComboBox列、Button...

    Flex 全选效果 批量删除

    它支持复杂的列布局、分组、排序、过滤以及自定义渲染等功能。在这个示例中,`AdvancedDataGrid`可能被用来显示一个包含多项数据的列表,每一项都有一个复选框供用户选择。 为了实现全选效果,我们需要在`...

    表格演示(1)AdvancedDataGrid应用

    在Flex开发中,AdvancedDataGrid相比普通的DataGrid,提供了更丰富的功能和更高级的定制能力。它支持多列排序、分层数据展示、拖放操作、自定义渲染器以及高级筛选等功能,这使得开发者能够构建出更为复杂的表格应用...

    Flex dataGrid 自定义显示列

    过滤功能通常需要编写自定义代码来实现,而分组则可以通过`grouping`属性和`AdvancedDataGrid`的`groupingEnabled`属性来开启。 总的来说,Flex DataGrid的自定义显示列是通过灵活的列配置、自定义渲染器以及数据...

    Flex中AdvancedDataGrid的用法示例介绍

    AdvancedDataGrid组件内部定义了标签,用来创建分组的列。通过嵌套标签定义了不同的列。在示例代码中,定义了一个名为"学校"的列,用来展示学校名称,其余的列则没有在代码片段中完整显示,但可以通过类似的结构来...

    SparkTree_AdvancedDataGrid

    SparkTree_AdvancedDataGrid是基于Adobe Flex SDK 4.5的一个高级组件,它在Flex应用中提供了强大的树形数据展示功能。Flex是一个用于创建富互联网应用程序(RIA)的开放源代码框架,广泛应用于Web开发,特别适合构建...

    Flex 3 发现之旅

    4. **多列分组**:可以将多列数据归并到同一个表头下,形成分组,这样有助于用户更好地理解和组织数据。 5. **使用单元渲染器**:AdvancedDataGrid支持跨多列使用相同渲染器,或者在同一列中使用多个不同的渲染器,...

    AdvancedDataGrid 对sdk3.5不支持,对3.2支持方案(合并单元格)

    在Flex开发中,AdvancedDataGrid组件是一个强大的数据网格控件,它提供了丰富的功能,如分组、排序、过滤以及自定义列渲染等。然而,针对Adobe Flex SDK 3.5版本,AdvancedDataGrid存在一些兼容性问题,这使得在该...

    advancedDataGrid单击逐级展开的例子

    `advancedDataGrid`是Flex SDK中的一个强大组件,它扩展了基本的`dataGrid`,增加了许多高级特性,如分组、排序、过滤、拖放以及多级展开。对于复杂的层次数据,`advancedDataGrid`通过使用`Grouping`和`...

Global site tag (gtag.js) - Google Analytics