Flex Spark Datagrid单元格1 *单元格2存储在单元格3中
我有点新的datagrids和spark,并且一直在用我的大脑来解决这个问题。我有一个正在加载XMLList的数据网格。一个字段是一个数值,它将被计算为另一个字段的时间,并且该结果将被存储并在网格中即时显示。Flex Spark Datagrid单元格1 *单元格2存储在单元格3中
例子:
XML
<SampleTable>
<Row>
<Item>Item 1</Item>
<Quantity>10</Quantity>
<Price></Price>
<Cost></Cost>
</Row>
</SampleTable>
所以用户会在价格进入,成本将与价格*数量值电网更新,与数据提供程序正在使用更新表单保存时的结果。
在网格中添加和XML已绑定。我可以简单地更新单元格的工作。我需要帮助确定在哪里做计算。只有价格是可编辑的,当单元格更改值时,我希望计算成本。
的处理程序编辑会话:
import spark.components.gridClasses.CellPosition;
import spark.events.GridEvent;
private var mouseDownRowIndex:int;
private var mouseDownColumnIndex:int;
protected function dataGrid_gridMouseDownHandler(event:GridEvent):void
{
mouseDownRowIndex = event.rowIndex;
mouseDownColumnIndex = event.columnIndex;
}
protected function dataGrid_gridMouseUpHandler(event:GridEvent):void
{
// Start a grid item editor if:
// - the rowIndex is valid
// - mouseUp is on the same cell and mouseDown
// - shift and ctrl keys are not down
// - cell is editable
// - an editor is not already running
// An editor may already be running if the cell was already
// selected and the data grid started the editor.
if (event.rowIndex >= 0 &&
event.rowIndex == mouseDownRowIndex &&
event.columnIndex == mouseDownColumnIndex &&
!(event.shiftKey || event.ctrlKey) &&
event.column.editable &&
!event.grid.dataGrid.itemEditorInstance)
{
event.grid.dataGrid.startItemEditorSession(event.rowIndex, event.columnIndex);
}
}
<s:DataGrid id="dgTest" x="10" y="68" width="900" editable="true" electionMode="singleCell" requestedRowCount="4" gridMouseDown="dataGrid_gridMouseDownHandler(event)" gridMouseUp="dataGrid_gridMouseUpHandler(event)">
<s:columns>
<s:ArrayList>
<s:GridColumn width="250" dataField="Item" headerText="Item" resizable="true" sortable="false" editable="false"></s:GridColumn>
<s:GridColumn width="160" dataField="Quantity" headerText="Quantity" resizable="false" sortable="false" editable="false"></s:GridColumn>
<s:GridColumn width="90" dataField="Price" headerText="Price" resizable="false" sortable="false" ></s:GridColumn>
<s:GridColumn width="90" dataField="Cost" headerText="Cost" resizable="false" sortable="false" editable="false"></s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
你应该让你的数据源可绑定。
,这样,代码(AS),这将是:
[Bindable]
var myXMLList:XMLList;
我不认为这是可能的但绑定到一个XMLList。您应该改用XMLListCollection。
它仍然不是很清楚,我如果你想不想找个地方保存数据,或者如果你只是想以可视化...
S:拥有的GridColumn一个叫“的labelFunction”属性。也许这足以满足您的需求。
public function myLabelFunction(item:Object, column:DataGridColumn):String
{
var amount:Number = item.Quantiy;
var price:Number = item.Price;
return amount*price as String
}
在您例如
<s:GridColumn width="90" dataField="Cost" headerText="Cost" resizable="false" sortable="false" editable="false"></s:GridColumn>
会变成
<s:GridColumn width="90" dataField="Cost" headerText="Cost" resizable="false" sortable="false" editable="false" labelFunction="myLabelFunction"></s:GridColumn>
提供的代码是不完整。它是一个例子。
祝你好运。
使用itemrenderer得到它的工作。它很丑,但很有用。
我遇到的麻烦是将此事件移至PercentComplete字段发生更改而不是此字段上的单击事件时。这是我遇到麻烦的时机。
<s:GridColumn width="90" dataField="Extension" headerText="Extension" resizable="false" sortable="false" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer mouseDown="itemrenderer1_dataChangeHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.events.GridEvent;
protected function itemrenderer1_dataChangeHandler(event):void
{
if(data){
var data_field:String = ((parseFloat(data['PercentComplete'])/100)*parseFloat(data['Weight'])).toFixed(2).toString();
this.dataLabel.text = data_field;
data.Extension[0] = data_field;
}
}
]]>
</fx:Script>
<s:Label id="dataLabel" text="{data.Extension}" height="100%" width="100%" textAlign="left" verticalAlign="middle"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Datagrid是数据源的所有者,而不是GridItemRenderer。 因此你不应该使用mouseDownEvents。 (什么时候Tab键通过你的细胞?)。你甚至可以考虑将这种业务逻辑从你的视图移到你的控制器(或你的模型)。
对于你的例子,你真的不需要一个“花哨的”GridItemRenderer。一切都必须在你的数据网格之外进行计算。
火花Datagrid有一个叫“gridItemEditorSessionSave”的事件。
spark.components.DataGrid.gridItemEditorSessionSave
项目编辑器中的数据后调度已保存到数据 提供商和编辑已被关闭。
事件类型: spark.events.GridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_SAVE
语言版本: 3.0
Player版本:的Flash 10,AIR 2.5
产品版本:的Flex 4.5
就我个人而言,我会实现一个Bindable ValueObject并将其转换为IList实现中的XMLList,例如包含一组这些对象的ArrayCollection。举例如下:
[Bindable]
public class MyValueObject
{
public var percentComplete:Number;
public var weight:Number;
public function get extension():Number
{
return percentComplete*weight;
}
}
如果填充这些ValueObjects你的DataGrid中,你可以使用一个愚蠢的看法,甚至更好,你可以使用任何你喜欢的视图,而无需更改实际的应用程序。 (这不是OO编程的目的吗?)
这个问题与第一个完全不同。我愿意提供答案,但你应该自己做一些研究。
我看着gridItemEditorSessionSave事件,但我需要这些字段计算并显示在网格中,而不是在结束。我试图重现的功能就像电子表格一样。 – user1596429 2012-08-16 15:11:46
我的例子会给你一个电子表格的功能。电子表格只会在完成编辑单元格后重新计算公式。如果你真的想重新计算你的PercentComplete ItemRenderer的编辑,你可以尝试使用KeyDown Eventlistener(注册击键),但我个人建议不要这样做。 – 2012-08-16 18:55:50