Flex4 DataGrid中嵌入RadioButton的实现方法

在Flex4应用中，DataGrid组件是展示结构化数据的常用控件，有时我们需要在DataGrid列中嵌入RadioButton来实现单选功能。以下是实现这一需求的具体方法。

基本实现思路

要在DataGrid中嵌入RadioButton，我们需要使用itemRenderer技术。Flex的DataGridColumn提供了itemRenderer属性，允许我们为每一列自定义显示内容。

mxml <mx:DataGrid id="myDataGrid" dataProvider="{myData}"> <mx:columns> <mx:DataGridColumn headerText="选择" itemRenderer="components.RadioButtonRenderer"/> <mx:DataGridColumn headerText="姓名" dataField="name"/> <mx:DataGridColumn headerText="年龄" dataField="age"/> </mx:columns> </mx:DataGrid>

自定义RadioButton渲染器

创建一个自定义的RadioButtonRenderer类是实现这一功能的核心：

```actionscript
package components
{
import mx.controls.RadioButton;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;

public class RadioButtonRenderer extends RadioButton implements IDropInListItemRenderer
{
    private var _listData:BaseListData;

    public function RadioButtonRenderer()
    {
        super();
        groupName = "dataGridRadioGroup"; // 设置组名确保单选
    }

    override public function set data(value:Object):void
    {
        super.data = value;
        if(value != null)
        {
            selected = value.selected; // 绑定选中状态
        }
    }

    override public function get listData():BaseListData
    {
        return _listData;
    }

    override public function set listData(value:BaseListData):void
    {
        _listData = value;
    }
}

}
```

处理选中状态

为了跟踪哪个RadioButton被选中，我们需要在数据模型中添加一个selected属性：

actionscript [Bindable] private var myData:ArrayCollection = new ArrayCollection([ {name:"张三", age:25, selected:false}, {name:"李四", age:30, selected:true}, {name:"王五", age:28, selected:false} ]);

完整实现示例

下面是一个完整的实现示例，展示了如何在DataGrid中使用RadioButton并处理选中状态变化：

```mxml

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="initApp()">

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;

        [Bindable]
        private var myData:ArrayCollection;

        private function initApp():void
        {
            myData = new ArrayCollection([
                {name:"张三", age:25, selected:false},
                {name:"李四", age:30, selected:true},
                {name:"王五", age:28, selected:false}
            ]);
        }

        private function showSelected():void
        {
            for each(var item:Object in myData)
            {
                if(item.selected)
                {
                    Alert.show("选中的是: " + item.name);
                    return;
                }
            }
            Alert.show("没有选中任何项");
        }
    ]]>
</fx:Script>

<mx:DataGrid id="myDataGrid" dataProvider="{myData}" width="100%" height="200">
    <mx:columns>
        <mx:DataGridColumn headerText="选择" width="60" itemRenderer="components.RadioButtonRenderer"/>
        <mx:DataGridColumn headerText="姓名" dataField="name"/>
        <mx:DataGridColumn headerText="年龄" dataField="age"/>
    </mx:columns>
</mx:DataGrid>

<s:Button label="显示选中项" click="showSelected()" top="210"/>

```

注意事项

1. 单选实现：通过为所有RadioButton设置相同的groupName确保单选效果
2. 数据绑定：确保数据模型中有selected属性来跟踪选中状态
3. 性能考虑：对于大数据集，考虑使用虚拟渲染提高性能
4. 样式定制：可以通过CSS或直接设置RadioButton属性来自定义外观

高级应用

对于更复杂的需求，比如动态改变RadioButton状态或与其他组件交互，可以扩展上述基本实现：

```actionscript
// 在RadioButtonRenderer中添加点击事件处理
override protected function clickHandler(event:MouseEvent):void
{
super.clickHandler(event);

// 更新数据模型中所有项的选中状态
if(data != null)
{
    for each(var item:Object in outerDocument.myData)
    {
        item.selected = (item == data);
    }
    outerDocument.myData.refresh(); // 刷新数据绑定
}

}
```

通过这种方式，当用户点击某个RadioButton时，会自动更新数据模型中所有项的选中状态，确保只有一个项被选中。

总结

在Flex4的DataGrid中嵌入RadioButton需要结合自定义渲染器和数据绑定技术。关键点在于创建合适的itemRenderer类，并在数据模型中维护选中状态。这种方法不仅适用于RadioButton，也可推广到其他需要在DataGrid中嵌入自定义控件的情况。