上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




DataGridにラジオボタン(radiobutton)配置の方法を記載します。



Main.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var _list:ArrayCollection = new ArrayCollection([
{ selectflag:true, data1:"データ1-1", data2:"データ2-1", data3:"データ3-1" },
{ selectflag:false, data1:"データ1-2", data2:"データ2-2", data3:"データ3-2" },
{ selectflag:false, data1:"データ1-3", data2:"データ2-3", data3:"データ3-3" },
{ selectflag:false, data1:"データ1-4", data2:"データ2-4", data3:"データ3-4" },
{ selectflag:false, data1:"データ1-5", data2:"データ2-5", data3:"データ3-5" },
{ selectflag:false, data1:"データ1-6", data2:"データ2-6", data3:"データ3-6" },
])

private function onBtnDispData():void {
txtBindData.text = "<選択行>" + "\n" + "\n";
txtBindData.text += "行番号:" + (selected+1) + "\t";
txtBindData.text += "data1:" + _list[selected].data1 + "\t";
txtBindData.text += "data2:" + _list[selected].data2 + "\t";
txtBindData.text += "data3:" + _list[selected].data3 + "\n";
}

/**
* DataGrid選択Index取得処理
*/
public function getSelectedIndex(list:ArrayCollection):int {
var len:int = list.length;

for (var i:int = 0; i < len; i++) {
if (list[i].selectflag == true) {
return i;
}
}
return -1;
}
]]>
</mx:Script>

<!-- Index値 -->
<mx:Number id="selected">{getSelectedIndex(_list)}</mx:Number>

<mx:Panel>
<mx:HBox>
<mx:Spacer width="100%" />
<mx:VBox backgroundColor="#FFFFFF">
<mx:Label text="DataGridアイテム内にラジオボタン配置" fontSize="14"
color="#FF0000" fontWeight="bold"/>
<mx:DataGrid dataProvider="{_list}" rowCount="4">
<mx:columns>
<mx:DataGridColumn headerText="選択" width="50" dataField="checkbox"
textAlign="center"
itemRenderer="RadioButtonRenderer"/>
<mx:DataGridColumn headerText="データ1" width="100" dataField="data1" />
<mx:DataGridColumn headerText="データ2" width="100" dataField="data2" />
<mx:DataGridColumn headerText="データ3" width="100" dataField="data3" />
</mx:columns>
</mx:DataGrid>
<mx:Button id="btnDisp" label="表示" click="{onBtnDispData()}" />
<mx:TextArea id="txtBindData" width="350" height="200" editable="false" />
</mx:VBox>
<mx:Spacer width="100%" />
</mx:HBox>
</mx:Panel>

</mx:Application>


RadioButtonRenderer.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:RadioButton xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
groupName="rbtnGroup{count++}"
dataChange="onDataChange()">

<mx:Script>
<![CDATA[

import mx.collections.IList;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridListData;

private static var count:int = 0;

/**
* DataChange イベント
*/
private function onDataChange():void {
var dataField:String = DataGridListData(listData).dataField;

// data内をチェック
if(data[dataField] == true){
//ラジオボタンを選択状態
selected = true;
} else {
//ラジオボタンを未選択状態
selected = false;
}
}

/**
* ラジオボタン クリックイベント(Override)
*/
override protected function clickHandler(event:MouseEvent):void {
super.clickHandler(event);
var dataField:String = DataGridListData(listData).dataField;

// 選択されたラジオボタンとselectflagをTrueに変更
data[dataField] = true;
selected = true;

var dgUser:DataGrid = DataGrid(DataGridListData(listData).owner);
var list:IList = IList(dgUser.dataProvider);
var rowIndex:int = list.getItemIndex(data);
var selectedIndex:int = parentDocument.selected;

// 変更された選択Indexと前回の選択Indexを比較
if ( (selectedIndex >= 0) && (selectedIndex != rowIndex) ) {

// 前回の選択Indexのselectflagをfalseに変更
var selectedItem:Object = list.getItemAt(selectedIndex);
selectedItem[dataField] = false;

// 前回の選択Indexのラジオボタンをfalseに変更
var renderer:RadioButton = RadioButton(dgUser.itemToItemRenderer(selectedItem));
if (renderer) {
renderer.selected = false;
}
}

// 選択Indexを更新
parentDocument.selected = rowIndex;
}
]]>
</mx:Script>

</mx:RadioButton>



実行結果は以下のようになります
選択後、「表示」ボタン押下で選択行をテキストエリアに出力します。


少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。