使用项目单击有条件地更改数据网格行中的图标

Question

我必须设计一个数据网格，在第一列中我必须使用闭合的锁图标。当我单击数据网格中的一行时，所选行的图标应更改为打开的锁定图标。我如何在 Flex 3 中完成这项任务。 请帮我。

Answer 1

当数据更改时，有两种更新 itemRenderer 的选项。

1. 第一种是重写设置数据方法；正如你所说
   为你工作。
2. 第二个是监听 dataChange< /a>
   事件并在该事件处理程序中执行更新。

Answer 2

这是我实现上述任务的编码：当锁定为真时，将显示锁定图像，而当显示假笔图像时，将显示锁定图像。单击项目时，锁定将更改为 true 到 false，反之亦然。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
 import mx.collections.ArrayCollection;
[Bindable]public var arc:ArrayCollection=new ArrayCollection([{college:"College0",lock:true,status:"in progress" }
,{college:"College1",lock:true,status:"in progress" }
,{college:"College2",lock:true,status:"in progress" }
,{college:"College3",lock:false,status:"in progress"}
]);
private function changeBookletLockStatus():void
{

    arc[dgBooklet.selectedIndex].lock = (arc[dgBooklet.selectedIndex].lock==false);
    arc.refresh(); 
} 
]]>
</mx:Script>


<mx:DataGrid sortableColumns="false" height="100%" width="100%" id="dgBooklet" dataProvider="{arc}" 
 alternatingItemColors="[0xfffffff, 0xe4e4e4]" itemClick="changeBookletLockStatus()" >
    <mx:columns> 
    <mx:DataGridColumn headerText="Column 1" dataField="college" />

    <mx:DataGridColumn headerText="icon" dataField="lock" width="40">
        <mx:itemRenderer>
        <mx:Component>
            <mx:HBox paddingLeft="2">
               <mx:Script>
                <![CDATA[
                    override public function set data( value:Object ) : void 
                    {
                       super.data = value;
                       img.source=data.lock==true?"assets/lock.png":"assets/pen.png";
                    }
                ]]>
                </mx:Script>
              <mx:Image id="img"  />
              </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>

    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="Status" dataField="status" >
    </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

</mx:Application>