Flash/datagrid/checkbox表示

チェックボックス、データ1、データ2をフィールドに持つテーブルのサンプル

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mycomp="test.*"
        layout="absolute">
        <mycomp:LayerEditer />
</mx:Application>

test/LayerEditer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable]
      private var _list:ArrayCollection = new ArrayCollection([
        {id:1, checkbox:false, data1:"データ1-1", data2:"データ2-1" },
        {id:2, checkbox:false, data1:"データ1-2", data2:"データ2-2" },
        {id:3, checkbox:false, data1:"データ1-3", data2:"データ2-3" },
        {id:4, checkbox:false, data1:"データ1-4", data2:"データ2-4" },
      ]);
      private function onBtnDispData():void
      {
        var selectnum:int = -1;
        var selectcnt:int = 0;
        txt.text = "＜選択行＞" + "\n" + "\n";
        for (var i:int = 0; i < _list.length; i++) {
          if(_list[i].checkbox){
            txt.text += "行番号：" + (i+1) + "\t";
            txt.text += "data1：" + _list[i].data1 + "\t";
            txt.text += "data2：" + _list[i].data2 + "\n";
            selectcnt++;
          }
        }
        if (dataGrid1.selectedIndex != -1) {
          selectnum = dataGrid1.selectedItem.id;
        }
        txt.text += "\n" + "選択数：" + selectcnt + "\n";
        txt.text += "\n" + "選択行数:" + selectnum + "\n";
      }
    ]]>
  </mx:Script>
  
  <mx:Panel>
    <mx:HBox>
      <mx:Spacer width="100%" />
      <mx:VBox backgroundColor="#FFFFFF">
        <mx:DataGrid id="dataGrid1" dataProvider="{_list}" rowCount="4"  sortableColumns="false">
          <mx:columns>
            <mx:DataGridColumn headerText="選択" width="50" dataField="checkbox"
                                itemRenderer="test.CheckBoxRenderer"/>
            <mx:DataGridColumn headerText="データ1" width="100" dataField="data1" />
            <mx:DataGridColumn headerText="データ2" width="100" dataField="data2" />
          </mx:columns>
        </mx:DataGrid>
        <mx:Button id="btnDisp" label="表示" click="{onBtnDispData()}" />
        <mx:TextArea id="txt" width="350" height="200" editable="false" />
      </mx:VBox>
      <mx:Spacer width="100%" />
    </mx:HBox>
  </mx:Panel>
</mx:Application>

test/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>

値をユーザに変更させる時

xxx.mxml

<mx:DataGrid id="drawLayerDataGrid" rowCount="5" sortableColumns="false" selectedIndex="0" editable="true">
    <mx:columns>
        <mx:DataGridColumn headerText="目" width="30" dataField="visible" 
                      itemRenderer="app.mxml.editer.VisibleCheckBoxRenderer"/>
        <mx:DataGridColumn headerText="ｶｷﾞ" width="30" dataField="locked" 
                      itemRenderer="app.mxml.editer.LockedCheckBoxRenderer"/>
        <mx:DataGridColumn headerText="レイヤー名" width="140" dataField="name" />
    </mx:columns>
</mx:DataGrid>

xxx.as

// レイヤーデータグリッドアイテム編集イベントハンドラ
drawLayerDataGrid.addEventListener(DataGridEvent.ITEM_EDIT_BEGINNING,  _stage.disableEditingDrawLayerDataGrid);
// レイヤーデータグリッドアイテム編集イベント
private function disableEditingDrawLayerDataGrid(event:DataGridEvent):void
{
  // レイヤー以外編集させない
  if (event.dataField != 'name') {
    // 編集させない
    event.preventDefault();
  }
}

参照

http://studynet.blog54.fc2.com/blog-entry-60.html