【问题标题】:Flex Datagrid Column TotalFlex Datagrid 列总计
【发布时间】:2015-06-19 08:44:08
【问题描述】:

我有一个包含标题、价格、数量和总计列的数据网格。标题、价格和数量数据是从 xml 文件加载的,总数填充有 labelFunction 以将价格乘以数量。

我可以通过将字符串返回到总列下的行来使用 labelFunction 填充每一行的总和,但我无法弄清楚如何获取总列的总和。我想获得总体总数并将其显示在数据网格之外的文本框/其他地方。

我可以使用 updateEsimate 函数获得总数,但它只会使用数据网格上的 itemEditEnd 发送总数(这意味着我必须单击eat qty 行才能计算)和我希望它在加载后自动给我总数。

请帮忙!

(一些示例代码)

        public function updateEstimate(event:DataGridEvent):void
        {
            // TODO Auto-generated method stub

            var sum:Number = 0;

            for(var i:int=0; i<orderGrid.dataProvider.length ; i++) {

                sum += Number(orderGrid.dataProvider.getItemAt(i).total);
                totaltxt.text = sum.toString();

            }

            totaltxt.text = sum.toString();

        }




        public function getTotal(item:Object, column:DataGridColumn):String
        {


            var sum:Number = item.price * item.quantity;

            return sum.toString();


        }

    <mx:XMLListCollection id="xmlProdListColl"
                          source="{productXML.lastResult.offer}"
                          />


</fx:Declarations>
<mx:DataGrid id="orderGrid" x="44" y="0" width="640" height="155" 
             dataProvider="{xmlProdListColl}" 
             doubleClickEnabled="true" editable="true"
             itemEditEnd="orderGrid_itemEditEndHandler(event); updateEstimate(event)">
    <mx:columns>
        <mx:DataGridColumn headerText="Title" dataField="title" editable="false"/>
        <mx:DataGridColumn headerText="Price" dataField="price" editable="false"/>
        <mx:DataGridColumn headerText="Quantity" dataField="quantity"/>
        <mx:DataGridColumn headerText="Total" labelFunction="getTotal" editable="false"/>
    </mx:columns>
</mx:DataGrid>


<s:RichText id="totaltxt" width="147" height="84" fontSize="18" text=""  textAlign="center"
            verticalAlign="middle" />

【问题讨论】:

    标签: apache-flex datagrid flash-builder


    【解决方案1】:

    据我所知,您在 getTotal() 中计算总计以显示总计,但并未设置实际对象中的“总计”属性。它是您在 updateEstimate() 中使用的总属性。因此,每当您编辑数量时,您仍然会在数据网格中看到正确的总数,但文本字段中的值将保持不变

    我不是绑定 dataProviders 的忠实拥护者,因为您永远不知道数据何时可用并且很难修改它(就像我们在这里需要它一样)。我更喜欢我自己的数据提供者变量,这些变量是强类型的,我可以随意修改:)

    所以我会这样做:

    我假设,您的 XML 看起来像这样,并且您没有其中的“总”值:

    <root>
    <lastResult>
        <offer>
            <title>Title</title>
            <price>20</price>
            <quantity>1</quantity>
        </offer>
        <offer>
            <title>Title 2</title>
            <price>30</price>
            <quantity>2</quantity>
        </offer>
    </lastResult>
    

    在您的代码中的某个时刻,您将拥有您的 XML。这是您修改它的地方,添加一个总属性并将 dataProvider 传递给网格:

    private var _orderDataProvider:XMLListCollection;
    
    private function gotData():void
    {
         var list:XMLList = new XMLList(productXML.lastResult.offer);
        _orderDataProvider = new XMLListCollection(list);
    
        updateEstimate(); // call this before we assign the dataprovider to the grid, so we will have totals in items
        orderGrid.dataProvider = _orderDataProvider;
    }
    
    public function updateEstimate(event:DataGridEvent = null):void
    {
        // update all totals in all items and the "Estimated total" in one go               
        var sum:Number = 0;
    
        for (var i:int = 0; i < _orderDataProvider.length; i++)
        {
            var item:Object = _orderDataProvider.getItemAt(i);
            item.total = item.quantity * item.price;
            sum += Number(_orderDataProvider.getItemAt(i).total);
        }
    
        totaltxt.text = sum.toString();
    }
    

    MXML:

    <mx:DataGrid id="orderGrid"
                 x="44"
                 y="0"
                 width="640"
                 height="155"
                 doubleClickEnabled="true"
                 editable="true"
                 itemEditEnd="updateEstimate(event)">
    
        <mx:columns>
    
            <mx:DataGridColumn headerText="Title"
                               dataField="title"
                               editable="false"/>
    
            <mx:DataGridColumn headerText="Price"
                               dataField="price"
                               editable="false"/>
    
            <mx:DataGridColumn headerText="Quantity"
                               dataField="quantity"/>
    
            <mx:DataGridColumn headerText="Total"
                               dataField="total"
                               editable="false"/>
    
        </mx:columns>
    
    </mx:DataGrid>
    
    <s:RichText id="totaltxt"
                width="147"
                height="84"
                fontSize="18"
                text=""
                textAlign="center"
                verticalAlign="middle"/>
    

    现在您看到这不是理想的代码,因为我们每次在编辑时都会更新所有项目中的总计,尽管您只编辑一个条目,但我们不必弄乱几个函数,只要您不列表中有 1000 个条目应该没问题。

    【讨论】:

    • 非常感谢!!!将“= null”添加到 updateEstimate 函数允许我在其他地方使用此函数(enterState、comboBox refresh、ItemEdit 等),而不仅仅是 dataGrid。
    【解决方案2】:

    您可以改为在 XMLListCollection 上使用 CollectionEvent。这将在开始时以及对数据进行任何更新时分派:

    public function updateEstimate(event:CollectionEvent):void{
        // your update code
    }
    
    <mx:XMLListCollection id="xmlProdListColl"
                          collectionChange="updateEstimate(event)"
                          source="{productXML.lastResult.offer}"/>
    

    【讨论】:

    • 感谢您让我找到正确的方向!那仍然不起作用-您仍然必须单击单元格才能推送总计(仍然具有 itemEditEnd 功能)。还有其他想法吗?
    • ?? CollectionEvent 没有调度?
    • 不是。我只是根据您的上述回复进行了更改。还有什么我应该补充的吗?
    • 我应该使用 getItemAt 以外的东西吗?这是否像 selectedItem 一样工作,或者它仍然可以循环播放? sum += Number(orderGrid.dataProvider.getItemAt(i).total);
    猜你喜欢
    • 2010-11-20
    • 2012-06-17
    • 1970-01-01
    • 2011-04-09
    • 2012-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-21
    相关资源
    最近更新 更多