如何在flex中显示datagrid中的总行数

时间:2011-09-28 14:31:33

标签: flex

我有一个AdvanceDataGrid。如何显示底部每列的总数。我能够计算总数,并尝试通过给出宽度作为列宽在每列下面的标签上显示它们。但是他们没有在每一列下方正确对齐。

<mx:Label id="TotalMonth" text="{numberFormatter.format(totalMonthAmount)}" width="{colWidth}"/>

有没有办法可以将总数分配给网格本身而不是使用下面的单独标签。

1 个答案:

答案 0 :(得分:2)

你有两种选择。首先是使用另一个高级数据网格,另一个是修改你的dataProvider。

假设您有类型为MockData的对象的arrayCollection

    public class MockData
{
    public var value1:Number;
    public var value2:Number;
    public var value3:Number;
    public var value4:Number;
}

两个数据网格选项应该是这样的:

<?xml version="1.0" encoding="utf-8"?>

             

        protected function getSummedResult(value:Object):ArrayCollection
        {
            var summedResult:MockData = new MockData();
            summedResult.value1 = 0;
            summedResult.value2 = 0;
            summedResult.value3 = 0;
            summedResult.value4 = 0;

            for each (var data:MockData in value as ArrayCollection)
            {
                summedResult.value1 += data.value1;
                summedResult.value2 += data.value2;
                summedResult.value3 += data.value3;
                summedResult.value4 += data.value4;
            }

            return new ArrayCollection([summedResult]);
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    <s:ArrayCollection id="mockData">
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
    </s:ArrayCollection>
</fx:Declarations>
<mx:VBox>
    <mx:AdvancedDataGrid id="dateGrid" dataProvider="{mockData}" />
    <mx:AdvancedDataGrid rowCount="2"
                         id="dateGrid2" dataProvider="{getSummedResult(dateGrid.dataProvider)}" />
</mx:VBox>

第二个选项是只使用一个这样的网格:

<mx:AdvancedDataGrid id="dateGrid" dataProvider="{getSummedResult(mockData)}" />


            protected function getSummedResult(value:Object):ArrayCollection
        {
            var dataProvider:ArrayCollection = ArrayCollection(value);
            var summedResult:MockData = new MockData();
            summedResult.value1 = 0;
            summedResult.value2 = 0;
            summedResult.value3 = 0;
            summedResult.value4 = 0;
            for each (var data:MockData in dataProvider)
            {
                summedResult.value1 += data.value1;
                summedResult.value2 += data.value2;
                summedResult.value3 += data.value3;
                summedResult.value4 += data.value4;
            }

            var result:ArrayCollection = new ArrayCollection(dataProvider.source.concat());
            result.addItem(summedResult);

            return result;
        }

您的个人选择会更有帮助。如果你有forc的setter,你可以修改数据提供者,但绑定非常简单。

玩得开心,祝你好运。