我在Flex中有一个Datagrid。我需要在第一列添加一个单选按钮,这样当我选择该单选按钮时,应该选择整行。 我尝试使用以下代码 -
<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)如果我单击该行上的任何其他位置,则该行将被选中。这不是预期的行为。如果只有在我选择单选按钮时才会选中。
请帮我解决这个问题。 :)
答案 0 :(得分: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
。
答案 1 :(得分:0)
这是另一个solution的工作示例。如果您不使用XML数据,则不允许使用parent()。请改用outerDocument.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>
答案 2 :(得分:0)
应用:
<?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>