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




DataGrid内のチェックボックス(checkbox)で選択されている行の色を
変更する方法を記載します。



Main.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
import mx.events.ListEvent;
import mx.events.FlexEvent;
import mx.events.CollectionEvent;
import mx.controls.CheckBox;
import mx.collections.ArrayCollection;

private var _defaultColors:Array;

[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" },
{ checkbox:false, data1:"データ1-7", data2:"データ2-7", data3:"データ3-7" },
{ checkbox:false, data1:"データ1-8", data2:"データ2-8", data3:"データ3-8" },
{ checkbox:false, data1:"データ1-9", data2:"データ2-9", data3:"データ3-9" },
{ checkbox:false, data1:"データ1-10", data2:"データ2-10", data3:"データ3-10" },
{ checkbox:false, data1:"データ1-11", data2:"データ2-11", data3:"データ3-11" },
{ checkbox:false, data1:"データ1-12", data2:"データ2-12", data3:"データ3-12" },
{ checkbox:false, data1:"データ1-13", data2:"データ2-13", data3:"データ3-13" },
{ checkbox:false, data1:"データ1-14", data2:"データ2-14", data3:"データ3-14" },
{ checkbox:false, data1:"データ1-15", data2:"データ2-15", data3:"データ3-15" },
])

private function onCreationComplete():void {
_list.addEventListener(CollectionEvent.COLLECTION_CHANGE, onChangeCollection);
}

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";
}

/**
* ColorPicker データ 変更 イベント
*/
private function onColorChange(event:ColorPickerEvent):void {
setColorPattern();
}

/**
* リストArrayデータ 変更 イベント
*/
private function onChangeCollection(event:CollectionEvent):void {
setColorPattern();
}

/**
* DataGrid Itemクリック イベント
*/
public function onDgrListClick(event:MouseEvent):void{
if( event.target is CheckBox ){
// チェックボックス変更時、選択行の色を再設定
setColorPattern();
}
}

/**
* DataGrid 選択行の色変更処理
*/
private function setColorPattern():void {
var rowMax:uint;

if(!_defaultColors) {
// 初期値のカラーパターンを記憶
_defaultColors = dgrList.getStyle("alternatingItemColors");
}

var colors:Array = new Array();

rowMax = _list.length + 1;

for(var i:int = 0;i < rowMax; i++) {
// データによって色を変更する
if( i >= _list.length){
colors.push(_defaultColors[i % 2]);
} else {
if( _list[i].checkbox == true) {
// チェックボックス選択時
colors.push(color.selectedColor);
}else{
// チェックボックス未選択時
colors.push(_defaultColors[i % 2]);
}
}
}
dgrList.setStyle("alternatingItemColors", colors);
}
]]>
</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 id="dgrList" dataProvider="{_list}" rowCount="8"
click="{onDgrListClick(event)}">
<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:HBox>
<mx:Button id="btnDisp" label="表示" click="{onBtnDispData()}" />
<mx:ColorPicker id="color" change="{onColorChange(event)}" selectedColor="#99ff33" />
</mx:HBox>

<mx:TextArea id="txtBindData" width="400" 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>


実行結果は以下のようになります
ColorPickerで選択されている色が、選択時の行色となります。


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












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