Book10-No.12 应用DataGrid与项目呈现器 _Web前端

Book10-No.12 使用DataGrid与项目呈现器

1、Spark与MX

MX： ?Flex4之前的版本所用到的组件，基于面向对象继承的思想。以"mx:"开头
Spark： ?Flex4所用到的组件，基于组合的思想，以"s:"开头，是Flex发展的趋势

MX与Spark。优先使用Spark，二者可以兼容集成

2、DataGrid以及项目呈现器的使用

DataGrid是为了显示应用程序数据，以行列的形式展示出来
项目呈现器：<s:MXItemRenderer>,默认有data属性，表示一行记录的所有信息
内部项目呈现器<fx:Component><s:MXItemRenderer></s:MXItemRenderer></fx:Component>?，内部添加，只限于该组件自身使用
labelFunction：创建一个方法，传递的参数是一行记录的Object，以及选中的列信息（coloum:Object.column），返回值为要显示的内容

3、AdvancedDataGrid

默认排序，多列排序
设置属性sortExpertMode为true，则为单列排序
设置属性styleFunction属性设置行列的特殊显示

public function myStyleFunc(data:Object, column:AdvancedDataGridColumn):Object
			{
				if(data["cost"] <= 1.0) {
					return {color:0xFF0000, fontWeight:"bold"};
				}
				
				return null;
			}

?分组：

使用标签：

<?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 creationComplete="{myGroup.refresh()}"
    	height="200">
		<mx:dataProvider>
			<mx:GroupingCollection2 id="myGroup" source="{dp}">
				<mx:Grouping>
					<mx:GroupingField name="cat" />
				</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>

?使用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;
            
            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 creationComplete="{myGroup.refresh()}" defaultLeafIcon="{null}" 
    	height="200">
		<mx:dataProvider>
			<mx:GroupingCollection2 id="myGroup" source="{dp}">
				<mx:Grouping>
					<mx:GroupingField name="cat">
						<mx:summaries>
							<mx:SummaryRow summaryPlacement="last group">
								<mx:fields>
									<mx:SummaryField2 dataField="qty" summaryOperation="SUM" label="summary" />
								</mx:fields>
							</mx:SummaryRow>
						</mx:summaries>
					</mx:GroupingField>
				</mx:Grouping>
			</mx:GroupingCollection2>
		</mx:dataProvider>
		<mx:rendererProviders>
			<mx:AdvancedDataGridRendererProvider dataField="summary" columnIndex="1" columnSpan="2" renderer="renderers.SummaryTextForAS" />
		</mx:rendererProviders>
		<mx:columns>
                  <mx:AdvancedDataGridColumn dataField="name"/>
                  <mx:AdvancedDataGridColumn dataField="cost"/>
                  <mx:AdvancedDataGridColumn dataField="qty"/>
					<mx:AdvancedDataGridColumn dataField="summary"/>
            </mx:columns>
      </mx:AdvancedDataGrid>

 
 </s:Application>