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




DataGrid内にチェックボックス(checkbox)配置方法を記載します。



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([
{ checkbox:false, data1:"データ1-1", data2:"データ2-1", data3:"データ3-1" },
{ checkbox:false, data1:"データ1-2", data2:"データ2-2", data3:"データ3-2" },
{ checkbox:false, data1:"データ1-3", data2:"データ2-3", data3:"データ3-3" },
{ checkbox:false, data1:"データ1-4", data2:"データ2-4", data3:"データ3-4" },
{ checkbox:false, data1:"データ1-5", data2:"データ2-5", data3:"データ3-5" },
{ checkbox:false, data1:"データ1-6", data2:"データ2-6", data3:"データ3-6" },
]);

private function onBtnDispData():void {
var selectnum:int = 0;

txtBindData.text = "<選択行>" + "\n" + "\n";
for(var i:int = 0; i < _list.length; i++){
if(_list[i].checkbox){
txtBindData.text += "行番号:" + (i+1) + "\t";
txtBindData.text += "data1:" + _list[i].data1 + "\t";
txtBindData.text += "data2:" + _list[i].data2 + "\t";
txtBindData.text += "data3:" + _list[i].data3 + "\n";
selectnum++;
}
}
txtBindData.text += "\n" + "選択行数:" + selectnum + "\n";
}
]]>
</mx:Script>

<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"
itemRenderer="CheckBoxRenderer"/>
<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>


CheckBoxRenderer.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
paddingBottom="5"
paddingLeft="5"
paddingTop="5"
paddingRight="5"
horizontalAlign="center" verticalAlign="middle"
verticalScrollPolicy="off" horizontalScrollPolicy="off">

<mx:CheckBox id="chkBox" click="{data.checkbox = !data.checkbox}" selected="{data.checkbox}" />
</mx:VBox>


チェックボックスにて選択・非選択の情報はArrayCollection(_list)のcheckboxを
見れば取得することができます。


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


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












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