`
schy_hqh
  • 浏览: 543130 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

(十二)AdvancedDataGrid

 
阅读更多
AdvancedDataGrid扩展了普通的DataGrid,功能更强大
设置AdvancedDataGrid的样式
   关注特别的行、列或单元。常见用法:将负数显示为红色
   AdvancedDataGrid允许编写并调用样式函数以实现上述功能

1.使用styleFunction属性,指定一个函数,该函数返回一个样式规则
2.数据分组(使用标签或者ActionScript来实现),实际上是对dataProvider进行操作
3.提供摘要信息(使用标签或者ActionScript来实现),实际是对各分组数据的操作
(GroupingCollection2类描述的数据才能显示摘要信息)

1.AdvancedDataGrid排序功能
下面的代码执行后,将会呈现一个可滚动列表
用户点击标题可以设置第一排序,第二排序字段
排序功能由AdvancedDataGrid底层提供
<?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" >

	<s:layout>
		<s:VerticalLayout paddingTop="10"
						  horizontalAlign="center"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
	
			private var arrayData:Array=[
				{name:"banana",cat:"fruit",cost:.99,qty:2},
				{name:"bread",cat:"bakery",cost:1.99,qty:3},
				{name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
				{name:"sour cream",cat:"dairy",cost:.33,qty:2},
				{name:"orange",cat:"fruit",cost:.52,qty:4},
				{name:"donut",cat:"bakery",cost:.33,qty:2},
				{name:"yogurt",cat:"dairy",cost:.99,qty:5},
				{name:"milk",cat:"dairy",cost:2.99,qty:2},
				{name:"apple",cat:"fruit",cost:1.05,qty:4},
				{name:"colby cheese",cat:"dairy",cost:3.05,qty:4}];
	
			[Bindable]
			private var dp:ArrayCollection=new ArrayCollection(arrayData);
		]]>
	</fx:Script>

	<mx:AdvancedDataGrid dataProvider="{dp}"
		height="250"/>

</s:Application>


sortExpertMode="true"
<?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" >

	<s:layout>
		<s:VerticalLayout paddingTop="10"
						  horizontalAlign="center"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
	
			private var arrayData:Array=[
				{name:"banana",cat:"fruit",cost:.99,qty:2},
				{name:"bread",cat:"bakery",cost:1.99,qty:3},
				{name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
				{name:"sour cream",cat:"dairy",cost:.33,qty:2},
				{name:"orange",cat:"fruit",cost:.52,qty:4},
				{name:"donut",cat:"bakery",cost:.33,qty:2},
				{name:"yogurt",cat:"dairy",cost:.99,qty:5},
				{name:"milk",cat:"dairy",cost:2.99,qty:2},
				{name:"apple",cat:"fruit",cost:1.05,qty:4},
				{name:"colby cheese",cat:"dairy",cost:3.05,qty:4}];
	
			[Bindable]
			private var dp:ArrayCollection=new ArrayCollection(arrayData);
		]]>
	</fx:Script>
	
	<!-- 当指定sortExpertMode="true" 多排序区域将不会出现 
	     在此模式下若要进行多排序,需要使用ctrl再单击另外的排序列的标题区域-->
	<mx:AdvancedDataGrid dataProvider="{dp}"
		sortExpertMode="true"
		height="250"/>

</s:Application>


使用LabelFunction指定样式规则,通过函数返回样式
<?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" >

	<s:layout>
		<s:VerticalLayout paddingTop="10"
						  horizontalAlign="center"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
	
			private var arrayData:Array=[
				{name:"banana",cat:"fruit",cost:.99,qty:2},
				{name:"bread",cat:"bakery",cost:1.99,qty:3},
				{name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
				{name:"sour cream",cat:"dairy",cost:.33,qty:2},
				{name:"orange",cat:"fruit",cost:.52,qty:4},
				{name:"donut",cat:"bakery",cost:.33,qty:2},
				{name:"yogurt",cat:"dairy",cost:.99,qty:5},
				{name:"milk",cat:"dairy",cost:2.99,qty:2},
				{name:"apple",cat:"fruit",cost:1.05,qty:4},
				{name:"colby cheese",cat:"dairy",cost:3.05,qty:4}];
	
			[Bindable]
			private var dp:ArrayCollection=new ArrayCollection(arrayData);

			public function myStyleFunc(data:Object,col:AdvancedDataGridColumn):Object
			{
				if(data["cost"]==0.99) {
					return {color:0xFF0000,fontWeight:"blod"};
				} else {
					return null;
				}
			}
		]]>
	</fx:Script>

	<mx:AdvancedDataGrid dataProvider="{dp}"
		height="250">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="cat"/>
			<mx:AdvancedDataGridColumn dataField="name"/>
			<mx:AdvancedDataGridColumn dataField="cost" styleFunction="myStyleFunc"/> <!--styleFunction作用于局部 -->
		</mx:columns>
	</mx:AdvancedDataGrid>

</s:Application>


<?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" >

	<s:layout>
		<s:VerticalLayout paddingTop="10"
						  horizontalAlign="center"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
	
			private var arrayData:Array=[
				{name:"banana",cat:"fruit",cost:.99,qty:2},
				{name:"bread",cat:"bakery",cost:1.99,qty:3},
				{name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
				{name:"sour cream",cat:"dairy",cost:.33,qty:2},
				{name:"orange",cat:"fruit",cost:.52,qty:4},
				{name:"donut",cat:"bakery",cost:.33,qty:2},
				{name:"yogurt",cat:"dairy",cost:.99,qty:5},
				{name:"milk",cat:"dairy",cost:2.99,qty:2},
				{name:"apple",cat:"fruit",cost:1.05,qty:4},
				{name:"colby cheese",cat:"dairy",cost:3.05,qty:4}];
	
			[Bindable]
			private var dp:ArrayCollection=new ArrayCollection(arrayData);
			
			//参数1:代表某列的数据
			//参数2:包括了sytleFunction属性对应的列的信息
			//返回值:null,表示不使用任何样式;
			//返回包含了若干样式属性及其对应值的Object
			//返回的样式将作用于AdvancedDataGrid的中,即字体颜色都被设为了红色
			public function myStyleFunction(data:Object,col:AdvancedDataGridColumn):Object {
				return {color:0xFF0000,fontWeight:"blod"};
			}
		]]>
	</fx:Script>

	<mx:AdvancedDataGrid dataProvider="{dp}"
		height="250"
		styleFunction="myStyleFunction"> <!-- 通过styleFunction属性指定对应函数,由函数返回样式规则-->
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="cat"/>
			<mx:AdvancedDataGridColumn dataField="name"/>
			<mx:AdvancedDataGridColumn dataField="cost"/>
		</mx:columns>
	</mx:AdvancedDataGrid>

</s:Application>


2.AdvancedDataGrid中对数据分组和增加摘要信息
通过标签完成:
<?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" >

	<s:layout>
		<s:VerticalLayout paddingTop="10"
						  horizontalAlign="center"/>
	</s:layout>

    <fx:Script>
        <![CDATA[
        	import mx.collections.ArrayCollection;
            
            private var arrayData:Array=[
                {name:"banana",cat:"fruit",cost:.99,qty:2},
                {name:"bread",cat:"bakery",cost:1.99,qty:3},
                {name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
                {name:"sour cream",cat:"dairy",cost:.33,qty:2},
                {name:"orange",cat:"fruit",cost:.52,qty:4},
                {name:"donut",cat:"bakery",cost:.33,qty:2},
                {name:"yogurt",cat:"dairy",cost:.99,qty:5},
                {name:"milk",cat:"dairy",cost:2.99,qty:2},
                {name:"apple",cat:"fruit",cost:1.05,qty:4},
                {name:"colby cheese",cat:"dairy",cost:3.05,qty:4}];
    
            [Bindable]
            private var dp:ArrayCollection=new ArrayCollection(arrayData);
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid height="200"
						 creationComplete="myGroup.refresh()"> <!-- refresh被调用,程序就开始对数据进行分组,然后才能呈现-->
		<mx:dataProvider>
			<mx:GroupingCollection2 id="myGroup" source="{dp}">
				<mx:Grouping>
					<mx:GroupingField name="cat"/> <!--name属性指定了分组依据的字段,即按类别分组-->
				</mx:Grouping>
			</mx:GroupingCollection2>
		</mx:dataProvider>
		<mx:columns>
                  <mx:AdvancedDataGridColumn dataField="name"/>
                  <mx:AdvancedDataGridColumn dataField="cost"/>
                  <mx:AdvancedDataGridColumn dataField="qty"/>
            </mx:columns>
      </mx:AdvancedDataGrid>
 
 </s:Application>


<?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" >

	<s:layout>
		<s:VerticalLayout paddingTop="10"
						  horizontalAlign="center"/>
	</s:layout>

    <fx:Script>
        <![CDATA[
        	import mx.collections.ArrayCollection;
            
            private var arrayData:Array=[
                {name:"banana",cat:"fruit",cost:.99,qty:2},
                {name:"bread",cat:"bakery",cost:1.99,qty:3},
                {name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
                {name:"sour cream",cat:"dairy",cost:.33,qty:2},
                {name:"orange",cat:"fruit",cost:.52,qty:4},
                {name:"donut",cat:"bakery",cost:.33,qty:2},
                {name:"yogurt",cat:"dairy",cost:.99,qty:5},
                {name:"milk",cat:"dairy",cost:2.99,qty:2},
                {name:"apple",cat:"fruit",cost:1.05,qty:4},
                {name:"colby cheese",cat:"dairy",cost:3.05,qty:4}];
    
            [Bindable]
            private var dp:ArrayCollection=new ArrayCollection(arrayData);
        ]]>
    </fx:Script>
	
	<!--设置AdvancedDataGrid的属性defaultLeafIcon="null" 可以移除物品签发的图标-->
	<mx:AdvancedDataGrid creationComplete="myGroup.refresh()"
		height="200" >
		<mx:dataProvider>
			<mx:GroupingCollection2 id="myGroup" source="{dp}">
				<mx:Grouping>
					<mx:GroupingField name="cat">
						<!-- 为各个分组创建摘要信息-->
						<mx:summaries>
							<mx:SummaryRow summaryPlacement="last">
								<mx:fields>
									<!--dataField计算摘要的数据字段 
									    summaryOperation定义了摘要数据如何计算:SUM MIN MAX AVG COUNT
									    label将摘要值关联到某个字段
									    -->
									<mx:SummaryField2 dataField="qty" summaryOperation="SUM" label="summary"/>
								</mx:fields>
							</mx:SummaryRow>
						</mx:summaries>
						
					</mx:GroupingField>
				</mx:Grouping>
			</mx:GroupingCollection2>
		</mx:dataProvider>
		<mx:columns>
              <mx:AdvancedDataGridColumn dataField="name"/>
              <mx:AdvancedDataGridColumn dataField="cost"/>
              <mx:AdvancedDataGridColumn dataField="qty"/>
        </mx:columns>
		
		<mx:rendererProviders>
			<!-- 本项目呈现器专用于summary字段
			     columnIndex属性使呈现器显示在索引为1的列中,列索引从0开始
			     columnSpan指定呈现器横跨几列
			     renderer指定呈现器的路径-->
			<mx:AdvancedDataGridRendererProvider dataField="summary" columnIndex="1" columnSpan="2" renderer="renderers.SummaryText"/>
		</mx:rendererProviders>
		
  </mx:AdvancedDataGrid>
 </s:Application>


SummaryText.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">
	<!-- data属性会包含表格中某一行的所有数据,Flex会自动将这些数据传递给组件-->
	<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="Total number of items:{data.summary}" />
</s:MXAdvancedDataGridItemRenderer>



通过ActionScript完成分组与添加摘要信息
<?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" >

	<s:layout>
		<s:VerticalLayout paddingTop="10"
						  horizontalAlign="center"/>
	</s:layout>

    <fx:Script>
        <![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.Grouping;
			import mx.collections.GroupingCollection2;
			import mx.collections.GroupingField;
			
			import spark.components.Group;

            private var arrayData:Array=[
                {name:"banana",cat:"fruit",cost:.99,qty:2},
                {name:"bread",cat:"bakery",cost:1.99,qty:3},
                {name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
                {name:"sour cream",cat:"dairy",cost:.33,qty:2},
                {name:"orange",cat:"fruit",cost:.52,qty:4},
                {name:"donut",cat:"bakery",cost:.33,qty:2},
                {name:"yogurt",cat:"dairy",cost:.99,qty:5},
                {name:"milk",cat:"dairy",cost:2.99,qty:2},
                {name:"apple",cat:"fruit",cost:1.05,qty:4},
                {name:"colby cheese",cat:"dairy",cost:3.05,qty:4}];
    
            [Bindable]
            private var dp:ArrayCollection=new ArrayCollection(arrayData);
           
			private function initDG():void
			{
				 //创建分组集合对象
				 var myGroupColl:GroupingCollection2 = new GroupingCollection2();
				 //获取dataProvider
				 myGroupColl.source = myADG.dataProvider;
				 
				 //创建分组
				 var group:Grouping = new Grouping();
				 //分组字段
				 var gf:GroupingField = new GroupingField("cat");
				 //以数组格式赋值到分组对象的fields属性中
				 group.fields = [gf];
				 //将分组对象赋值到分组集合的grouping属性中
				 myGroupColl.grouping = group;
				 
				 //调用refresh方法,对数据进行分组
				 myGroupColl.refresh();
				 
				 //将数据重新放回AdvancedDataGrid中
				 myADG.dataProvider = myGroupColl;
			}
        ]]>
    </fx:Script>

	<mx:AdvancedDataGrid id="myADG" 
	    dataProvider="{dp}"
		creationComplete="initDG()">
	    <mx:columns>
	        <mx:AdvancedDataGridColumn dataField="name"/>
	        <mx:AdvancedDataGridColumn dataField="cost"/>
	        <mx:AdvancedDataGridColumn dataField="qty"/>
	    </mx:columns>
	</mx:AdvancedDataGrid>

</s:Application>


<?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" >

	<s:layout>
		<s:VerticalLayout paddingTop="10"
						  horizontalAlign="center"/>
	</s:layout>

    <fx:Script>
        <![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.Grouping;
			import mx.collections.GroupingCollection2;
			import mx.collections.GroupingField;
			import mx.collections.SummaryField2;
			import mx.collections.SummaryRow;

            private var arrayData:Array=[
                {name:"banana",cat:"fruit",cost:.99,qty:2},
                {name:"bread",cat:"bakery",cost:1.99,qty:3},
                {name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
                {name:"sour cream",cat:"dairy",cost:.33,qty:2},
                {name:"orange",cat:"fruit",cost:.52,qty:4},
                {name:"donut",cat:"bakery",cost:.33,qty:2},
                {name:"yogurt",cat:"dairy",cost:.99,qty:5},
                {name:"milk",cat:"dairy",cost:2.99,qty:2},
                {name:"apple",cat:"fruit",cost:1.05,qty:4},
                {name:"colby cheese",cat:"dairy",cost:3.05,qty:4}];
    
            [Bindable]
            private var dp:ArrayCollection=new ArrayCollection(arrayData);
           
			 private function initDG():void
			{
				var myGroupColl:GroupingCollection2=new GroupingCollection2();
				myGroupColl.source=myADG.dataProvider;
				var group:Grouping=new Grouping();
				var gf:GroupingField=new GroupingField("cat");
				group.fields=[gf];
				myGroupColl.grouping=group;

				
				//创建摘要信息(逐一将各对象的属性进行设置,然后赋值到相应的对象上)
				var sr:SummaryRow = new SummaryRow();
				
				var sf:SummaryField2 = new SummaryField2();
				sf.dataField = "qty";
				sf.summaryOperation = "SUM";
				sf.label = "summary";
				
				sr.fields = [sf];
				sr.summaryPlacement = "last";
				
				gf.summaries = [sr];
				
				//配置好摘要信息后才调用refresh
				myGroupColl.refresh();
				myADG.dataProvider=myGroupColl;
			}
        ]]>
    </fx:Script>

	<mx:AdvancedDataGrid id="myADG" 
	    dataProvider="{dp}"
	    creationComplete="initDG()">
	    <mx:columns>
	        <mx:AdvancedDataGridColumn dataField="name"/>
	        <mx:AdvancedDataGridColumn dataField="cost"/>
	        <mx:AdvancedDataGridColumn dataField="qty"/>
	    </mx:columns>
		<mx:rendererProviders>
		    <mx:AdvancedDataGridRendererProvider 
		        dataField="summary"
		        columnIndex="1"
		        columnSpan="2"
		        renderer="renderers.SummaryTextForAS"/>
		</mx:rendererProviders>
	</mx:AdvancedDataGrid>

</s:Application>

SummaryTextForAS.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" top="0" left="0" right="0" bottom="0" text="Total number of items: {data.summary}" />
</s:MXAdvancedDataGridItemRenderer>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics