Flex Spark 数据网格 单元格 1 * 单元格 2 存储在单元格 3 中

Question

我对数据网格和火花有点陌生，并且一直在绞尽脑汁来解决这个问题。我有一个加载XMLList的数据网格。一个字段是一个数值，将计算该值乘以另一个字段，并且该结果将动态存储并显示在网格中。

例：

.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>

Answer 1

您应该使数据源可绑定。

因此，在代码 （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>

提供的代码绝不是完整的。它就是一个例子。

祝你好运。

Answer 2

让它使用项目渲染器工作。它很丑，但有效。

我遇到的问题是将此事件移动到更改 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>

Answer 3

Datagrid 是数据源的所有者，而不是 GridItemRenderer。因此，不应使用 mouseDownEvents。（当 Tab 槽你的单元格时会发生什么？您甚至可以考虑将这种业务逻辑从视图转移到控制器（或模型）中。

对于您的示例，您真的不需要"花哨的"GridItemRenderer。一切都必须在数据网格之外进行计算。

Spark Datagrid有一个事件，称为"gridItemEditorSessionSave"。

spark.components.DataGrid.gridItemEditorSessionSave

在

将项目编辑器中的数据保存到数据中后调度 提供程序和编辑器已关闭。

事件类型：spark.events.GridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_SAVE

语言版本：3.0

播放器版本：闪电侠10，AIR 2.5

产品版本： Flex 4.5

就我个人而言，我会实现一个可绑定的ValueObject，并在IList实现中转换我的XMLList，例如和ArrayCollection，其中包含一组这些对象。示例如下：

[Bindable]
public class MyValueObject
{
   public var percentComplete:Number;
   public var weight:Number;
   public function get extension():Number
   {
      return percentComplete*weight;
   }
}

如果使用这些 ValueObject 填充数据网格，则可以使用哑视图，甚至更好的是，可以使用任何您喜欢的视图，而无需更改实际应用程序。（这难道不是面向对象编程的目的吗？

不过，这个问题与第一个问题完全不同。我愿意提供答案，但你应该自己做一些研究。