apache-flex - 如何在 flex 高级数据网格中的分层数据显示中显示复选框

Question

在我的高级数据网格中，我正在显示分层数据。我需要显示一个复选框，而不是文件夹图标，我可以选择或取消选择它。基于选中的复选框，我需要显示选中的单元格值。请让我知道如何实现它。

Answer 1

下面的代码可以帮助你： - 如果你愿意，你可以在其中实现你的逻辑。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.ListEvent;

            [Bindable]
            private var dpHierarchy:ArrayCollection = new ArrayCollection([
                {Region:"Southwest", categories: [
                    {Region:"Arizona", categories: [ 
                        {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                        {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
                    {Region:"Central California", categories: [ 
                        {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
                    {Region:"Nevada", categories: [ 
                        {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
                    {Region:"Northern California", categories: [ 
                        {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                        {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
                    {Region:"Southern California", categories: [ 
                        {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                        {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
                ]}
            ]);


            protected function onItemClick(event:ListEvent):void
            {
                myADG_ID.expandItem(myADG_ID.selectedItem,!myADG_ID.isItemOpen(myADG_ID.selectedItem));
            }



        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG_ID" width="100%" height="100%" defaultLeafIcon="{null}" 
                         folderOpenIcon="{OpenCheckBox}" folderClosedIcon="{CloseCheckBox}"
                         itemClick="onItemClick(event)" 
                         displayDisclosureIcon="false"> 
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}" 
                                 childrenField="categories"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                       headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>  
</s:Application>

打开CheckBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true" width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:CheckBox id="cbSelector" selected="true" width="100%" />
</s:MXAdvancedDataGridItemRenderer>

关闭检查框.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true" width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:CheckBox id="cbSelector" selected="false" width="100%" />
</s:MXAdvancedDataGridItemRenderer>