Question

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

Answer 1

数据更改时，有两个选项可用于更新itemRenderer。

第一种是覆盖set数据方法;正如你所说的那样适合你。
第二个是听dataChange 事件并在该事件处理程序中执行更新。

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>

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

2 个答案: