Flex Datagrid 列总计
Flex Datagrid Column Total
我有一个数据网格,其中包含标题、价格、数量和总计列。标题、价格和数量数据从 xml 文件加载,总数由 labelFunction 填充以将价格乘以数量。
我可以通过将字符串返回到总计列下的行来使用 labelFunction 填充每行的总计,但我无法弄清楚如何获取总计列的总计。我想获取总计并将其显示在数据网格之外的 textBox/somewhere else 中。
我可以使用 updateEsimate 函数获得总数,但它只会使用数据网格上的 itemEditEnd 发送总数(这意味着我必须单击“吃数量”行才能进行统计) 我希望它在加载后自动给我总数。
请帮忙!
(一些示例代码)
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" />
您可以改用 XMLListCollection 上的 CollectionEvent。这将在开始时以及对数据进行任何更新时分派:
public function updateEstimate(event:CollectionEvent):void{
// your update code
}
<mx:XMLListCollection id="xmlProdListColl"
collectionChange="updateEstimate(event)"
source="{productXML.lastResult.offer}"/>
据我所知,您在 getTotal() 中计算总数以显示总数,但并未在实际对象中设置 "total" 属性。它是您在 updateEstimate() 中使用的总数 属性。因此,无论何时编辑数量,您仍然会在数据网格中看到正确的总数,但文本字段中的值将保持不变
我不是绑定 dataProvider 的忠实粉丝,因为您永远不知道数据何时可用并且很难修改它(就像我们在这里需要它一样)。我更喜欢我自己的 dataProvider 变量,它们是强类型的,我可以随意修改 :)
所以我会这样做:
我假设,您的 XML 看起来像这样,您没有 "total" 值:
<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 个条目应该没问题。
我有一个数据网格,其中包含标题、价格、数量和总计列。标题、价格和数量数据从 xml 文件加载,总数由 labelFunction 填充以将价格乘以数量。
我可以通过将字符串返回到总计列下的行来使用 labelFunction 填充每行的总计,但我无法弄清楚如何获取总计列的总计。我想获取总计并将其显示在数据网格之外的 textBox/somewhere else 中。
我可以使用 updateEsimate 函数获得总数,但它只会使用数据网格上的 itemEditEnd 发送总数(这意味着我必须单击“吃数量”行才能进行统计) 我希望它在加载后自动给我总数。
请帮忙!
(一些示例代码)
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" />
您可以改用 XMLListCollection 上的 CollectionEvent。这将在开始时以及对数据进行任何更新时分派:
public function updateEstimate(event:CollectionEvent):void{
// your update code
}
<mx:XMLListCollection id="xmlProdListColl"
collectionChange="updateEstimate(event)"
source="{productXML.lastResult.offer}"/>
据我所知,您在 getTotal() 中计算总数以显示总数,但并未在实际对象中设置 "total" 属性。它是您在 updateEstimate() 中使用的总数 属性。因此,无论何时编辑数量,您仍然会在数据网格中看到正确的总数,但文本字段中的值将保持不变
我不是绑定 dataProvider 的忠实粉丝,因为您永远不知道数据何时可用并且很难修改它(就像我们在这里需要它一样)。我更喜欢我自己的 dataProvider 变量,它们是强类型的,我可以随意修改 :)
所以我会这样做:
我假设,您的 XML 看起来像这样,您没有 "total" 值:
<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 个条目应该没问题。