0

我对数据网格和火花有点陌生,并且一直在绞尽脑汁想弄清楚这一点。我有一个使用 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>
4

3 回答 3

0

使用 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>
于 2012-08-15T21:45:19.190 回答
0

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

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

spark Datagrid 有一个称为“gridItemEditorSessionSave”的事件。

spark.components.DataGrid.gridItemEditorSessionSave

在项目编辑器中的数据保存到数据提供者并关闭编辑器后调度。

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

语言版本: 3.0

播放器版本: Flash 10、AIR 2.5

产品版本: Flex 4.5

就我个人而言,我会实现一个 Bindable ValueObject 并将我的 XMLList 转换为 IList 实现,例如和 ArrayCollection,其中包含一组这些对象。示例如下:

[Bindable]
public class MyValueObject
{
   public var percentComplete:Number;
   public var weight:Number;

   public function get extension():Number
   {
      return percentComplete*weight;
   }
}

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

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

于 2012-08-16T07:56:30.617 回答
0

您应该使您的数据源可绑定。

所以在代码(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>

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

祝你好运。

于 2012-08-14T13:55:50.213 回答