如何在项目渲染器中选中/勾选复选框？

Question

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

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

所以我的 Image 对象监听 add 事件，所以当 Image 对象添加到容器时。它调用 addHandler() 函数获取图像的 id，并通过数据网格表循环查找匹配的 id 并检查 CheckBox。我的循环工作得很好。使用 Alert.show() 我可以看到它与 id 匹配并将布尔值设置为 true，以便勾选复选框。但是复选框没有打勾。

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

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

我的 Image 对象监听 add 事件。

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

您应该在更新对象后使用数据提供者的“刷新”方法：

(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”函数中克隆对象来粗暴地更改表达式的左侧。因此，在任何情况下，比较现在都应该返回 FALSE，并且应该为每一行更新数据属性。

set 函数可以删除，但它是调试相同问题的好地方。

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