Flex DataGrid:根据另一个值更改值? [英] Flex DataGrid: Change value based on another value?

问题描述

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

I have a DataGrid in Flex, with one column a checkbox and another a numeric value. When the checkbox is clicked, the numeric value should change, either to 0 if the checkbox is unselected, or to a pre-defined minimum value if the checkbox is selected. Here is the code I have:

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

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

The value updates in the data (I can see it when I close and open the dialog this is in), but it doesn't update instantly in the data grid. How can I make the value visibly change as soon as the checkbox is clicked?

推荐答案

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

In your data object, make sure to fire an event every time the included property changes. In your 2nd itemRenderer listen to the event and update the value whenever the property changes.

概念上是这样的:

在数据对象中:

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');
}

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

Add a renderer to your second column, like this:

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

这篇关于Flex DataGrid:根据另一个值更改值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！