在 Flex DataGrid 中显示复选框列

Posted 2023-02-18

【中文标题】在 Flex DataGrid 中显示复选框列

【英文标题】：Displaying a checkbox column in a Flex DataGrid

【发布时间】：2017-03-27 05:12:33

【问题描述】：

我正在尝试创建一个自定义 Flex DataGrid，它由两列组成，一列用于标签，另一列用于复选框。 该复选框包含在一个名为 CustomRenderer 的类中，该类继承自 GridItemRenderer 并实现了 IFactory。

在 CustomRenderer 的每个实例中，我都有一个名为 number 的变量，以便在单击复选框时，它可以将数字传回，以便我知道单击了哪一行。

问题是我的 CustomRenderer 在程序运行时没有显示。

请有人帮忙。

这是我的代码。

MyProgram.mxml

<?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"
               initialize="initData()">

    <fx:Script> 
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.CheckBox;
            import mx.rpc.events.AbstractEvent;

            private var ArrayItems:Array = [
                Label:'Table',
                Label:'Chair',
                Label:'Stool',
                Label:'Bench',
                Label:'Sofa'];

            [Bindable]
            private var ArrayCollectionItems:ArrayCollection;

            private var t:CustomRenderer;

            public function initData():void
            
                ArrayCollectionItems=new ArrayCollection(ArrayItems);

                t = new CustomRenderer();
                t.cb.addEventListener(MouseEvent.CLICK, HandleClick);
                MainGrid.columns[1].itemRenderer = t.newInstance();     
            

            public function HandleClick(event:Event):void
            
                var c:CustomRenderer = (event.currentTarget) as CustomRenderer
                var RowClicked:int = c.number;
                   

        ]]>
    </fx:Script>
    <s:states>
        <s:State name="State1"/>
    </s:states>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Panel x="99" y="14"   skinClass="spark.skins.spark.PanelSkin">
        <s:DataGrid id="MainGrid" x="19" y="17"  
                    dataProvider="ArrayCollectionItems" requestedRowCount="4" requireSelection="false"
                    resizableColumns="false" selectionMode="singleRow" showDataTips="false">
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn minWidth="200" dataField="Label" headerText="Label"></s:GridColumn>
                    <s:GridColumn minWidth="30" dataField="" headerText="">                 
                    </s:GridColumn>
                </s:ArrayList>
            </s:columns>
            <s:typicalItem>
                <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
            </s:typicalItem>
        </s:DataGrid>
    </s:Panel>
</s:Application>

CustomRenderer.as

import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.core.IFactory;

import spark.components.gridClasses.GridItemRenderer;

public class CustomRenderer extends GridItemRenderer implements IFactory
   
    private static var count:int = 0;
    public var number:int;
    public var cb:CheckBox;

    public function CustomRenderer()
           
        cb = new CheckBox();
        number = count++;
        cb.x = 22;
        cb.y = 4;           
        addElement(cb);
    

    public function newInstance():*
    
        return new CustomRenderer();
    

【参考方案1】：

这可能是因为您将 itemrenderer 的实例传递给列 (new CustomRenderer()) 而不是类 (CustomRenderer)。常见的方法是将 itemrenderer 类传递给您的列，然后处理其中的点击/选择：

<s:GridColumn minWidth="30" headerText="" itemRenderer="com.yourpackage.CustomRenderer"> 

在您分配它时开始输入“Customrenderer”，您应该能够自动完成，以便它写出您的完整包路径。

然后，您可以在渲染器中捕获复选框选择事件，并可以设置一些自定义数据属性（例如，data.selected）。如果您确实需要在选择后在 Grid 之外执行某些操作，您可能需要在选择时从渲染器触发自定义事件并在数据网格上监听它。

【讨论】：

我已经修改了我的代码，现在我可以使用自定义事件将选中的复选框的行和列发送回主类。

我需要添加另一列，该列将显示一个按钮，单击时将删除该按钮所在的行，因此我现在取消行和列编号。我想要做的是将复选框值绑定到 ArrayCollection 变量中的元素。但是如何将一个类中的复选框值绑定到另一个类中声明的数组集合？

您需要在您的 itemrenderer 中覆盖 set data()、createChildren() 和 commitProperties() 方法。将复选框的创建移到 createChildren() 方法中——这是标准的 Flex 生命周期实践。 set data() 是将对象传递给您的 itemrenderer 的地方。在这里，您可以查找对象的属性值（例如，“selected”）并将该属性存储在本地变量中。然后在 commitProperties() 中根据“选定”值设置复选框的状态。