开发者

Checkbox rendering in datagrid

<mx:DataGrid id="dg" dataProvider="{cNumbersList}">
    <mx:columns>
        <mx:DataGridColumn dataField="contactName" headerText="Name" wi开发者_如何学JAVAdth="50"/>
        <mx:DataGridColumn dataField="contactNo" headerText="ContactNo" width="40"/>
        <mx:DataGridColumn  headerText="Select Contact Number" width="20">
            <mx:itemRenderer>
                <mx:Component>enter code here
                    <mx:CheckBox selected="false" />            
                </mx:Component>                        
            </mx:itemRenderer>                     
        </mx:DataGridColumn>                       
    </mx:columns>
</mx:DataGrid>  

How to get all checked items into one more new array ?Plz help me anyone


We wanted to have a checkbox in a datagrid that allowed multiple selections. We extended the DataGrid object:

package obj
{
import mx.controls.DataGrid;
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import mx.controls.CheckBox;
import mx.controls.listClasses.IListItemRenderer;

public class CheckboxDataGrid extends DataGrid
{

    override protected function selectItem(item:IListItemRenderer,
                              shiftKey:Boolean, ctrlKey:Boolean,
                              transition:Boolean = true):Boolean
    {
        // only run selection code if a checkbox was hit and always
        // pretend we're using ctrl selection
        if (item is CheckBox)
            return super.selectItem(item, false, true, transition);
        return false;
    }

    // turn off selection indicator
    override protected function drawSelectionIndicator(
                                indicator:Sprite, x:Number, y:Number,
                                width:Number, height:Number, color:uint,
                                itemRenderer:IListItemRenderer):void
    {
    }

    // whenever we draw the renderer, make sure we re-eval the checked state
    override protected function drawItem(item:IListItemRenderer,
                                selected:Boolean = false,
                                highlighted:Boolean = false,
                                caret:Boolean = false,
                                transition:Boolean = false):void
    {
        CheckBox(item).invalidateProperties();
        super.drawItem(item, selected, highlighted, caret, transition);
    }

    // fake all keyboard interaction as if it had the ctrl key down
    override protected function keyDownHandler(event:KeyboardEvent):void
    {
        // this is technically illegal, but works
        event.ctrlKey = true;
        event.shiftKey = false;
        super.keyDownHandler(event);
    }

}
}

We also created a CheckboxRenderer:

package obj
{
import flash.display.DisplayObject;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.ListBase

public class CheckBoxRenderer extends CheckBox
{
    public function CheckBoxRenderer()
    {
        focusEnabled = false;
    }

    override public function set data(value:Object):void
    {
        super.data = value;
        invalidateProperties();
    }

    override protected function commitProperties():void
    {
        super.commitProperties();
        if (owner is ListBase)
            selected = ListBase(owner).isItemSelected(data);
    }

    /* eat keyboard events, the underlying list will handle them */
    override protected function keyDownHandler(event:KeyboardEvent):void
    {
    }

    /* eat keyboard events, the underlying list will handle them */
    override protected function keyUpHandler(event:KeyboardEvent):void
    {
    }

    /* eat mouse events, the underlying list will handle them */
    override protected function clickHandler(event:MouseEvent):void
    {
    }

    /* center the checkbox if we're in a datagrid */
    override protected function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w, h);

        if (listData is DataGridListData)
        {
            var n:int = numChildren;
            for (var i:int = 0; i < n; i++)
            {
                var c:DisplayObject = getChildAt(i);
                if (!(c is TextField))
                {
                    c.x = (w - c.width) / 2;
                    c.y = 0;
                }
            }
        }
    }
}
}

Then in your flash page:

<obj:CheckboxDataGrid id="notificationsCheckboxGrid"
dataProvider="{_myModel._grid}"
allowMultipleSelection="true"
showHeaders="false"                            
change="emailAddressesSelected()">
<qmsAdmin:columns>                                     
    <mx:DataGridColumn width="20" sortable="false" itemRenderer="CheckBoxRenderer"/>
    <mx:DataGridColumn width="150" dataField="email"/>
    <mx:DataGridColumn dataField="notificationType"/>
</qmsAdmin:columns>     
</obj:CheckboxDataGrid>

Notice the change method "emailAddressesSelected()". Calls this method:

private function emailAddressesSelected():void
{
_emailAddressIndexesSelected = notificationsCheckboxGrid.selectedIndices;
}

_emailAddressIndexesSelected is just an Array object in the class defined as:

private var _emailAddressIndexesSelected:Array;


You could put an additional field into your contact class - "selected" or "checked" - and use the itemRenderer to set this value when the selection of the checkbox changes. Then you can simply loop through your contacts dataProvider and see which are checked.

You can do this:

<mx:Component>
   <mx:CheckBox id="contactCheckBox" selected="{data.contactSelected}" change="data.contactSelected = contactCheckBox.selected"/>            
</mx:Component>     

The renderers get the contact as its data. I haven't tested this, but it should in principle work. Let me know if problems occur with the code.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜