数据网格中用于选择整行的单选按钮

Question

我在 Flex 中有一个数据网格。我需要在第一列中添加一个单选按钮，这样当我选择该单选按钮时，应该选择整行。 我尝试使用以下代码 -

<mx:DataGridColumn id="selectColumnRadioButton" sortable="false" textAlign="center" editable="false" width="18">
                         <mx:itemRenderer >
                              <mx:Component>
                                     <mx:RadioButton selected="false"/>
                                 </mx:Component>
                             </mx:itemRenderer>
              </mx:DataGridColumn>

但存在以下问题 - 1）它允许我选择多个按钮。 2）如果我单击该行上的任何其他位置，则该行将被选中。这不是预期的行为。仅当我选择单选按钮时才应该选择。

请帮我解决这个问题。 :)

Answer 1

它允许我选择多个按钮

，因为这些单选按钮是嵌入式项目渲染器，属于不同组件中的不同单选按钮组。在父类（包含 DataGrid）中编写一个方法，该方法将 rowIndex 作为输入并相应地选择该行并显式取消选择所有其他单选按钮。您可以使用 outerDocument.methodName(listData.rowIndex) 从下拉单选按钮调用该方法

<mx:itemRenderer >
  <mx:Component>
    <mx:RadioButton selected="false" 
      change="outerDocument.methodName(listData.rowIndex)"/>
  </mx:Component>
</mx:itemRenderer>

如果我单击该行上的任何其他位置，则该行将被选中。这不是预期的行为。

这是 DataGrid 的默认行为 - 正如已经建议的那样，您必须仔细检查 DataGrid 代码，找出发生选择的部分，然后重写该方法。此行为可能是在 DataGrid 的某些基类（如 ListBase）中实现的。

Answer 2

这是另一个带有工作示例的解决方案。如果您不使用 XML 数据，则不允许使用parent()。请改用 externalDocument.dg.dataProvider，其中 dg 是 DataGrid 的 id。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
 <![CDATA[
 public var dp:XML = <users>
 <user>
 <name>one</name>
 <main>true</main>
 </user>
 <user>
 <name>two</name>
 <main>false</main>
 </user>
 <user>
 <name>tre</name>
 <main>false</main>
 </user>
 </users>;
 ]]>
 </mx:Script>
 <mx:VBox>
 <mx:DataGrid dataProvider="{dp.user}" width="400">
 <mx:columns>
 <mx:DataGridColumn headerText="Name" dataField="name"/>
 <mx:DataGridColumn headerText="Main">
 <mx:itemRenderer>
 <mx:Component>
 <mx:HBox horizontalAlign="center">
 <mx:Script>
 <![CDATA[
 private function changeMain(event:Event):void{
 if(data.main == 'true'){
 //nothing
 data.main = 'true';
 }else{
 for each(var u:XML in (data as XML).parent().user){
 u.main = 'false';
 }
 data.main = 'true';
 }
 }
 ]]>
 </mx:Script>
 <mx:RadioButton click="changeMain(event)"  selected="{(data.main == 'true')}"/>
 </mx:HBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 <mx:DataGridColumn headerText="Main value" dataField="main"/>
 </mx:columns>
 </mx:DataGrid>
 </mx:VBox>
</mx:Application>

Answer 3

应用：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private static const SELECTED:String = "SELECTED";
private static const UNSELECTED:String = "UNSELECTED";
]]>
</mx:Script>
<mx:ArrayCollection id="arr">
<mx:Object label="User 1" data="1" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 2" data="2" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 3" data="3" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 4" data="4" count="4" state="{UNSELECTED}"/>
<mx:Object label="Open Position" data="5" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 6" data="6" count="0" state="{UNSELECTED}"/>
<mx:Object label="Open Position" data="7" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 8" data="8" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 9" data="9" count="4" state="{UNSELECTED}"/>
<mx:Object label="Open Position" data="10" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 11" data="11" count="4" state="{UNSELECTED}"/>
<mx:Object label="Open Position" data="12" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 13" data="13" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 14" data="14" count="0" state="{UNSELECTED}"/>
<mx:Object label="User 15" data="15" count="4" state="{UNSELECTED}"/>
<mx:Object label="User 16" data="16" count="0" state="{UNSELECTED}"/>
</mx:ArrayCollection>
        <mx:DataGrid x="161" y="197" id="dg1" verticalGridLines="false"  horizontalGridLines="true" horizontalGridLineColor="#cccccc"draggableColumns="true"  dataProvider="{arr}">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" id="col1" width="150" itemRenderer="customRadio">
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Column 2" dataField="data" />
<mx:DataGridColumn headerText="Count" dataField="count"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

渲染器：

<?xml version="1.0" encoding="utf-8"?>
<mx:RadioButton xmlns:mx="http://www.adobe.com/2006/mxml" click="onRadioToggle()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var isSelected:Boolean;
private static const SELECTED:String = "SELECTED";
private static const UNSELECTED:String = "UNSELECTED";
override public function set data(value:Object):void {
super.data = value;
if(value){
//value.isSelected---> isSelected is temp var in dp, which wil keep track of
//whether it selected or not
//this.selected = value.selected;
if(value.state == SELECTED){
this.selected = true;
}
else{
this.selected = false;
}
}
}
private function onRadioToggle():void{
if(data.state == UNSELECTED)
{
data.state = SELECTED;
}
else{
data.state = UNSELECTED;
}
var arrObj:ArrayCollection = Object(this.owner.parent).arr ;
if(arrObj != null){
var len:int = arrObj.length;
for(var i:int = 0 ; i < len ; i++){
if(data.data != arrObj.getItemAt(i).data)
arrObj.getItemAt(i).state = UNSELECTED
}
}
}
]]>
</mx:Script>
</mx:RadioButton>