数据网格中的 Flex 复选框 itemrenderer答案

【问题标题】：Flex checkbox itemrenderer in datagrid数据网格中的 Flex 复选框 itemrenderer
【发布时间】：2012-01-21 21:51:53
【问题描述】：

在我的 flex 应用程序中，我使用了一个具有三个列的数据网格第一列用于复选框作为 itemRenderer 和其他两列是可编辑的。

我的要求是

现在当我从数据库中获取一些数据时，数据将填充到数据网格中，

1.填充数据后，第一列应在所有行中禁用 2.如果我单击一行中的第二列或第三列进行编辑..第一列对应行中的复选框应启用，复选框应准备好检查和取消选中..

我该怎么做这是我的代码

<mx:DataGrid x="46" y="135" dataProvider="{DetailsProvider}" width="836" height="349">
    <mx:columns>
        <mx:DataGridColumn headerText="Select" dataField="isSelect" itemRenderer="com.components.checkbox"/>
        <mx:DataGridColumn headerText="First Name" dataField="fname"/>
        <mx:DataGridColumn headerText="Second Name" dataField="sname"/></mx:columns></mx:DataGrid>

我希望这些细节足以理解我的问题任何想法..提前谢谢..

【问题讨论】：

标签： actionscript-3 apache-flex actionscript datagrid flex3

【解决方案1】：

我为您提供了我创建的示例代码，它在单个 DataGrid 中使用了 ItemRenderer 和 ItemEditor，您只需要创建一个名为 d ComNS 和 ComCB 的新 mxml 组件。只需创建我给你的示例代码。

主 mxml 应用程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" horizontalAlign="center" 
verticalAlign="middle" height="100%" width="100%">

<mx:Script>
    <![CDATA[
        public var arr:Array = new Array({isSelected:true,label:'ABC',score:'78',name:'ABC'},
                                         {isSelected:true,label:'DEF',score:'50',name:'DEF'},
                                         {isSelected:false,label:'GHI',score:'70',name:'GHI'},
                                         {isSelected:false,label:'JKL',score:'80',name:'JKL'},
                                         {isSelected:true,label:'TRE',score:'50',name:'MNO'});

        public function dgCLG_dataChange():void
        {

        }

        public function dgCLG_change():void
        {

        }

        public function btnSubmit_click():void
        {
            dgCopy.dataProvider = dgCLG.dataProvider;
        }

    ]]>
</mx:Script>

<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle">
    <mx:DataGrid id="dgCLG" dataProvider="{arr}" editable="true" dataChange="{dgCLG_dataChange();}" change="{dgCLG_change();}">
        <mx:columns>
            <mx:DataGridColumn headerText="" dataField="isSelected">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Box horizontalAlign="center" verticalAlign="middle" height="100%" width="100%">
                            <mx:Script>
                                <![CDATA[
                                    override public function set data(value:Object):void
                                    {
                                        if(value != null)
                                        {
                                            super.data = value;
                                            var temp:Object = value as Object;
                                            chb.selected = temp.isSelected;
                                        }
                                    }
                                ]]>
                            </mx:Script>
                            <mx:CheckBox id="chb"/>
                        </mx:Box>
                    </mx:Component>                     
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Label" dataField="label" editable="false">

            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Marks" dataField="score" editable="true" itemEditor="ComNS" editorDataField="value">

            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="name" headerText="Person" itemEditor="ComCB" editorDataField="value" editable="true">

            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>  

    <mx:Button id="btnSubmit" label="Click" click="{btnSubmit_click();}" />

    <mx:DataGrid id="dgCopy" editable="false">
        <mx:columns>
            <mx:DataGridColumn headerText="CopyLabel" dataField="label" />
            <mx:DataGridColumn headerText="CopyMarks" dataField="score" />
            <mx:DataGridColumn headerText="CopyPerson" dataField="name" />
        </mx:columns>
    </mx:DataGrid>
</mx:VBox>

</mx:Application>

ComNS.mxml 的代码

<?xml version="1.0" encoding="utf-8"?>
<mx:NumericStepper xmlns:mx="http://www.adobe.com/2006/mxml" minimum="0" maximum="100">

</mx:NumericStepper>

ComCB.mxml 的代码

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" dataProvider="{arr}" selectedIndex="1" creationComplete="{c_complete();}" >
<mx:Script>
    <![CDATA[
        public var arr:Array = new Array({label:'ABC'},{label:'DEF'},{label:'GHI'},{label:'JKL'},{label:'MNO'})

        public function c_complete():void
        {
            for(var i:int = 0; i < arr.length; i++)
            {
                if(arr[i].label == parentDocument.dgCLG.selectedItem.name)
                {
                    this.selectedItem = arr[i];
                }
            }   
        }
    ]]>
</mx:Script>
</mx:ComboBox>

如果有任何疑问，请评论我的答案......

【讨论】：

【解决方案2】：

如果您实现 IDropInListItemRenderer，您的渲染器将被传递一个 BaseListData 对象，除其他外，该对象将包含对 DataGrid 的引用。通过对 DataGrid 的引用，您可以将其 selectedItem 与该渲染器的数据对象进行比较，以启用或禁用该复选框。

注意 Checkbox 应该已经实现了这个接口，所以理论上你应该能够通过几个调整来使用它。但是，Adobe 没有正确实施它。查看在线帮助中此页面的 cmets 以了解如何修复 http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_4.html。

【讨论】：