Flex DataGrid：根据另一个值更改值？

Question

我在 Flex 中有一个 DataGrid，其中一列是复选框，另一列是数值。单击复选框时，数值应更改，如果未选中复选框，则更改为 0，如果选中复选框，则更改为预定义的最小值。这是我的代码：

<mx:DataGrid x="0" y="45" width="272" height="525" dataProvider="{dp}" variableRowHeight="true" editable="true" id="equipmentDG" verticalAlign="middle">                
    <mx:columns>                    

        <mx:DataGridColumn headerText="" headerStyleName="gridheader" width="20" dataField="included" editorDataField="selected" rendererIsEditor="true">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:CheckBox click="handleClicks(event)">
                        <fx:Script>
                            <![CDATA[
                            public function handleClicks(event:MouseEvent):void
                            {
                                data.included = !data.included;

                                if(data.included && data.antal == 0)     
                                    data.antal = data.minNo; 
                                else if(!data.included) 
                                    data.antal = 0;
                            }
                            ]]>
                        </fx:Script>
                    </mx:CheckBox>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="Antal" headerStyleName="gridheader" width="40" dataField="antal" editorDataField="value" editable="true">
            <mx:itemEditor>
                <fx:Component>

                    <mx:NumericStepper stepSize="1" width="35" height="20"  focusOut="numericstepper1_changeHandler(event)">
                        <fx:Script>
                            <![CDATA[
                            import mx.events.NumericStepperEvent;
                            override public function set data(value:Object):void
                            {
                                super.data = value;

                                if (value && value.hasOwnProperty("minNo"))
                                    minimum = value.minNo;

                                if (value && value.hasOwnProperty("maxNo"))
                                    maximum = value.maxNo;                                              
                            }

                            protected function numericstepper1_changeHandler(event:Event):void
                            {
                                if(data.antal > 0)
                                    data.included = true;
                                else
                                    data.included = false;
                            }

                            ]]>
                        </fx:Script>

                    </mx:NumericStepper>                                        

                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>


    </mx:columns>
</mx:DataGrid>

数据中的值更新（我可以在关闭并打开该对话框时看到它），但它不会在数据网格中立即更新。如何在单击复选框后立即使值发生明显变化？

Answer 1

在您的数据对象中，确保每次包含的属性更改时触发一个事件。在您的第二个 itemRenderer 中监听事件并在属性更改时更新值。

概念上是这样的：

在数据对象中：

private var _included : Boolean;
public function get included():Boolean{
 return this._included;
}

public function set included(value:Boolean):void
 this._included = value;
 this.dispatchEvent(new Event('includedChanged');
}

将渲染器添加到您的第二列，如下所示：

 <mx:DataGridColumn headerText="Antal" headerStyleName="gridheader" width="40" dataField="antal" editorDataField="value" editable="true">
  <mx:itemRenderer>
   <fx:Component>
   <mx:Label dataChange="onDataChange()" >
    <fx:Script>
     <![CDATA[
      public function onDataChange():void{
       thistext = data['Antal'];
       this.data.addEventListener('includedChanged',onIncludedChange);
      }
      public function onIncludedChange(e:Event):void{
       this.text = data['Antal'];
      }
     ]]>
    </fx:Script>
   </mx:Label>
  </fx:Component>
  </mx:itemRenderer>
  <mx:itemEditor>
   <fx:Component>

    <mx:NumericStepper stepSize="1" width="35" height="20"  focusOut="numericstepper1_changeHandler(event)">
     <fx:Script>
      <![CDATA[
       import mx.events.NumericStepperEvent;
       override public function set data(value:Object):void{
        super.data = value;

        if (value && value.hasOwnProperty("minNo"))
         minimum = value.minNo;

        if (value && value.hasOwnProperty("maxNo"))
          maximum = value.maxNo;                                              
        }

        protected function numericstepper1_changeHandler(event:Event):void
        {
         if(data.antal > 0)
          data.included = true;
         else
          data.included = false;
         }

         ]]>
        </fx:Script>
       </mx:NumericStepper>                                        
      </fx:Component>
     </mx:itemEditor>
    </mx:DataGridColumn>

Answer 2

我只是将 antal 标记为 [Bindable] 并将 dp 用作 ArrayCollection。

Answer 3

这是快速而简单的方法：重新分配dataProvider。这应该会强制 DataGrid 失效。