数据网格中的复选框呈现

时间:2009-12-18 13:31:02

标签: flex

<mx:DataGrid id="dg" dataProvider="{cNumbersList}">
    <mx:columns>
        <mx:DataGridColumn dataField="contactName" headerText="Name" width="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>  

如何将所有已检查的项目放入另一个新阵列?Plz帮助我任何人

2 个答案:

答案 0 :(得分:1)

我们希望在数据网格中有一个允许多个选择的复选框。我们扩展了DataGrid对象:

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

}
}

我们还创建了一个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;
                }
            }
        }
    }
}
}

然后在您的Flash页面中:

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

请注意更改方法“emailAddressesSelected()”。调用此方法:

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

_emailAddressIndexesSelected只是类中的一个Array对象,定义为:

private var _emailAddressIndexesSelected:Array;

答案 1 :(得分:0)

您可以在联系人类别中添加一个字段 - “已选中”或“已选中” - 并在选中复选框时更改使用itemRenderer设置此值。然后,您可以简单地遍历您的联系人dataProvider并查看已检查的内容。

你可以这样做:

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

渲染器将联系人作为其数据。我没有测试过这个,但它原则上应该工作。如果代码出现问题,请告诉我。