(十二)AdvancedDataGrid

最新推荐文章于 2020-05-20 11:50:45 发布

schy_hqh

最新推荐文章于 2020-05-20 11:50:45 发布

阅读量155

点赞数

分类专栏： WEB前端@Flex4 文章标签：大数据

本文链接：https://blog.csdn.net/schy_hqh/article/details/84375282

版权

WEB前端@Flex4 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>

schy_hqh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(十二)AdvancedDataGrid

AdvancedDataGrid扩展了普通的DataGrid，功能更强大设置AdvancedDataGrid的样式关注特别的行、列或单元。常见用法：将负数显示为红色 AdvancedDataGrid允许编写并调用样式函数以实现上述功能1.使用styleFunction属性，指定一个函数，该函数返回一个样式规则2.数据分组(使用标签或者ActionScript来实现...
复制链接

扫一扫