在 flex 中具有组和标题渲染器的高级数据网格组件答案

【问题标题】：advanceddatagrid component with group and header renderer in flex在 flex 中具有组和标题渲染器的高级数据网格组件
【发布时间】：2011-09-21 07:28:41
【问题描述】：

如何在 flex 3 中使用 grouprenderer 和 checkboxheader 渲染器创建高级数据网格组件？

【问题讨论】：

标签： apache-flex advanceddatagrid renderer

【解决方案1】：

请在下面找到我的解决方案：

<mx:AdvancedDataGridColumn headerText="indexed"
                                               width="100"
                                               dataField="indexed"
                                               showDataTips="true"
                                               editable="false"
                                               headerWordWrap="true"
                                               headerRenderer="index.DatagridCheckBoxHeaderRenderer"
                                               sortable="false">
                        <mx:itemRenderer>
                            <fx:Component>
                                <mx:HBox horizontalAlign="center">
                                    <mx:CheckBox id="indexed"
                                                 click="this.data.indexed=!this.data.indexed"
                                                 selected="{data.indexed}">
                                    </mx:CheckBox>
                                </mx:HBox>
                            </fx:Component>
                        </mx:itemRenderer>
                    </mx:AdvancedDataGridColumn>

DatagridCheckboxHeaderRenderer.mxml：

<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx"
     width="100%"
     height="100%"
     horizontalAlign="center">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.collections.HierarchicalData;
        import mx.controls.AdvancedDataGrid;
        public function checkAllDatainDatagrid(isObjectSelected:Boolean,propertyName:String):void
        {
            //if the header is checked,iterate thru the datagrid data 
            //and set all the checkbox to true 
            if (isObjectSelected)
            {
                selectAll(parentDocument.attributeList,isObjectSelected, propertyName);
            }
            else if(!isObjectSelected)
            {
                selectAll(parentDocument.attributeList,false, propertyName);
            }
            parentDocument.gridHierarchialData.source = parentDocument.attributeList;
        }
        protected function selectAll(dataCollection:ArrayCollection,isObjectSelected:Boolean, propertyName:String):ArrayCollection{
            for each (var obj:Object in dataCollection)
            {
                if(obj.hasOwnProperty('children')){
                    var childCollection:ArrayCollection = obj.children;
                    selectAll(childCollection,isObjectSelected, propertyName)
                }else if(obj.hasOwnProperty(propertyName)){
                    obj[propertyName]=isObjectSelected;
                }
            }
            return dataCollection;
        }

    ]]>
</fx:Script>
<s:Label text="Index ?"
         verticalAlign="middle"/>
<mx:CheckBox id="headerComboBox"
             click="checkAllDatainDatagrid(headerComboBox.selected,data.dataField);"
             verticalCenter="0">
</mx:CheckBox>

【讨论】：