如何检查/勾选项目渲染器中的复选框？

Question

我有一个网格表，其中包含船舶对象（数据提供者接受船舶对象的数组集合），并在网格表中显示船只和日期的名称。我的ship对象有一个名为checkList的属性，它是一个布尔值，用作我复选框项目渲染器中的数据绑定。（使复选框勾号和不勾选）

我想在添加图像时检查我的复选框将对象放入容器中。正在添加到容器的Image对象具有一个ID。我想将该Image ID与我的shipId在数据网格表中匹配，并选中该特定记录的复选框。

因此，我的图像对象侦听添加事件，因此当图像对象添加到容器。它调用addHandler（）函数获取图像的id和通过数据网格表的循环来查找匹配的id并检查CheckBox。我的循环工作很好。使用Alert.show（）我可以看到它匹配的id和布尔值设置为true，复选框被勾选。但是，复选框未勾选。

这些是我的代码。即使该特定记录的checkList属性设置为true。该复选框未勾选。我不知道问题是什么。我是一名学生，刚接触flex.Can有人能帮助我吗？

我MXML视图：我的网格

<s:DataGrid id="arrivalTable" x="-1" y="-1" width="302" height="205" requestedRowCount="4" 
       dataProvider="{myArrivalShips}" >    
     <s:columns> 
      <s:ArrayList>     
       <s:GridColumn dataField="shipName" headerText="Arrival Ships" itemRenderer="DesignItemRenderer.myCustomToolTipRenderer" width="130" ></s:GridColumn> 
       <s:GridColumn dataField="ETA" headerText="ETD" itemRenderer="DesignItemRenderer.myCheckBoxRenderer"></s:GridColumn>               
      </s:ArrayList>     
     </s:columns>     
    </s:DataGrid> 

我的图像对象监听添加事件。

displayImg.addEventListener(FlexEvent.ADD,addHandler); 

这是我的addHandler操作（）事件功能：

protected function addHandler(event:FlexEvent):void 
{ 
    var ImageShipId:String = Image(event.currentTarget).id;    
    var destination:BorderContainer = Image(event.currentTarget).owner as BorderContainer; 
    var destinationId:String = destination.id;   

    if(destinationId == "bct_HoldingArea"){ 

     for(var j:int = 0; j<arrivalTable.dataProvider.length; j++){ 

      var myShip:Ship = arrivalTable.dataProvider.getItemAt(j) as Ship; 
      var myShipId:String = myShip.shipID.toString(); 

      if(StringUtil.trim(myShipId) == StringUtil.trim(ImageShipId)){       
       myShip.checkList = true; 
       Alert.show("The ship name : " + myShip.shipName +"\n" + "The Ship selected : " + myShip.checkList); 
      } 
     }   
    }    
} 

我的复选框的项目渲染：

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">  
<s:HGroup> 
    <s:Label text="{data.ETD}" paddingTop="8"/>   
    <s:CheckBox id="myCheckBox" enabled="false" selected="{data.checkList}" /> 
</s:HGroup> 

Answer 1

您应该使用 “刷新” 的dataProvider方法更新对象后：

(arrivalTable.dataProvider as ArrayCollection).refresh(); 

所以你的函数看起来就像这样：

protected function addHandler(event:FlexEvent):void 
{ 
var ImageShipId:String = Image(event.currentTarget).id;    
var destination:BorderContainer = Image(event.currentTarget).owner as BorderContainer; 
var destinationId:String = destination.id;   

if(destinationId == "bct_HoldingArea"){ 

    for(var j:int = 0; j<arrivalTable.dataProvider.length; j++){ 

     var myShip:Ship = arrivalTable.dataProvider.getItemAt(j) as Ship; 
     var myShipId:String = myShip.shipID.toString(); 

     if(StringUtil.trim(myShipId) == StringUtil.trim(ImageShipId)){       
      myShip.checkList = true; 

      (arrivalTable.dataProvider as ArrayCollection).refresh(); 

      Alert.show("The ship name : " + myShip.shipName +"\n" + "The Ship selected : " + myShip.checkList); 
     } 
    }   
}    
} 

//编辑 在中间行的问题似乎是一个所谓的“中间一排虫”。我找到了一些信息here。

为了避免这种奇怪的事情试图改变这样的渲染代码：

<?xml version="1.0" encoding="utf-8"?> 
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true"> 
<fx:Script> 
    <![CDATA[ 
     import mx.utils.ObjectUtil; 

     [Bindable]override public function get data():Object 
     { 
      return ObjectUtil.copy(super.data);; 
     } 

     override public function set data(value:Object):void 
     { 
      super.data = value; 
     } 

    ]]> 
</fx:Script> 

<s:HGroup> 
    <s:Label text="{data.ETD}" paddingTop="8"/> 
    <s:CheckBox id="myCheckBox" enabled="false" selected="{data.checkList}"/> 
</s:HGroup> 
</s:GridItemRenderer> 

//编辑

这一招的简短解释：我发现，数据更新为发生除了中间的每一行。我试图遵循数据网格的源代码。我认为负责此操作的代码行是：

renderer.data = dataItem; 

在GridLayout.as类中。

此行会为除中间行之外的每一行导致数据更新。为什么？Flex对这个表达式的两边进行比较，如果它们相等则不做任何事情。在我们的情况下，它们不是平等的，但它似乎是一个真正的错误。无论如何...我们需要等到Flex团队解决问题。

作为临时解决方法，我通过克隆“get”函数中的Object而残酷地改变了表达式的左侧。所以现在比较应该返回FALSE，并且应该为每一行更新数据属性。

设置功能可以删除，但它是调试相同问题的好地方。

这不是一个好方法，但总比没有好。