在 Flex 中从 DataGrid 中删除选定的行

Posted 2023-02-22

【中文标题】在 Flex 中从 DataGrid 中删除选定的行

【英文标题】：Deleting selected rows from a DataGrid in Flex

【发布时间】：2011-07-05 13:16:48

【问题描述】：

我使用 ItemRenderer 在 DataGrid 中添加了一个复选框。我在下面粘贴了我正在使用的代码。

<mx:DataGrid id="dgEmployeeInfo" dataProvider="resultArray" x="131" y="95" editable="false">          
        <mx:columns>
            <mx:DataGridColumn headerText="Select" rendererIsEditor="true" editorDataField="selected">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:HBox>
                            <s:CheckBox id="testChk" click="testChk_clickHandler(event)" selected="cbSelected">                                   
                            </s:CheckBox>
                            <fx:Script>
                                <![CDATA[
                                    [Bindable]
                                    public var cbSelected:Boolean; 
                                    protected function testChk_clickHandler(event:MouseEvent):void
                                    
                                        cbSelected = testChk.selected;  
                                    
                                ]]>
                            </fx:Script>
                        </mx:HBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="First Name" dataField="firstName"/>
            <mx:DataGridColumn headerText="Last Name" dataField="lastName"/>
            <mx:DataGridColumn headerText="City" dataField="city"/>
            <mx:DataGridColumn headerText="Employee Code" dataField="empCode"/>             
        </mx:columns>       
    </mx:DataGrid>

我在 DataGrid 之外还有一个按钮，当单击此按钮时，我想删除所有选中 CheckBox 的行。谁能告诉我该怎么做？

【参考方案1】：

嗨！

首先，您的代码将无法正常工作，因为并非每个 DataGrid 行都有自己的 ItemRenderer 实例。对于具有 n VISIBLE 行的 DataGrid，恰好有 n 个项目渲染器实例。您可以轻松地检查这一点，如果您创建不能适合所有数据的 DataGrid，然后选择一些行并向上/向下滚动数据网格。您会看到意想不到的结果。

其中一种解决方案可能是在 resultArray 项目属性中“选择”附加字段（或任何您想要命名的字段）。然后您可以通过 ItemRenderer 的“数据”对象访问该属性。检查下面的代码：

<?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:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var resultArray:ArrayCollection = new ArrayCollection
                                                ([
                                                firstName:"1-1",lastName:"1-2",city:"1-3",empCode:"1-4",
                                                firstName:"2-1",lastName:"2-2",city:"2-3",empCode:"2-4",
                                                firstName:"3-1",lastName:"3-2",city:"3-3",empCode:"3-4",
                                                firstName:"4-1",lastName:"4-2",city:"4-3",empCode:"4-4",
                                                firstName:"5-1",lastName:"5-2",city:"5-3",empCode:"5-4",
                                                firstName:"6-1",lastName:"6-2",city:"6-3",empCode:"6-4",
                                                firstName:"7-1",lastName:"7-2",city:"7-3",empCode:"7-4",
                                                firstName:"8-1",lastName:"8-2",city:"8-3",empCode:"8-4",
                                                firstName:"9-1",lastName:"9-2",city:"9-3",empCode:"9-4",
                                                firstName:"10-1",lastName:"10-2",city:"10-3",empCode:"10-4",
                                            ]);

            protected function button1_clickHandler(event:MouseEvent):void
            
                for (var i:int=0; i< resultArray.length; i++)
                
                    if (resultArray[i].selected == true)
                    
                        resultArray.removeItemAt(i);
                    
                

                dgEmployeeInfo.invalidateList();
            

        ]]>
    </fx:Script>



    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:VGroup>
        <mx:DataGrid id="dgEmployeeInfo" dataProvider="resultArray" x="131" y="95" editable="false">          
            <mx:columns>
                <mx:DataGridColumn headerText="Select" rendererIsEditor="true" editorDataField="selected">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:HBox>
                                <s:CheckBox id="testChk" click="testChk_clickHandler(event)" selected="data.selected">
                                    <fx:Script>
                                        <![CDATA[
                                            [Bindable]
                                            public var cbSelected:Boolean; 
                                            protected function testChk_clickHandler(event:MouseEvent):void
                                            
                                                data.selected = testChk.selected;  
                                            
                                        ]]>
                                    </fx:Script>                                
                                </s:CheckBox>
                            </mx:HBox>
                        </fx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="First Name" dataField="firstName"/>
                <mx:DataGridColumn headerText="Last Name" dataField="lastName"/>
                <mx:DataGridColumn headerText="City" dataField="city"/>
                <mx:DataGridColumn headerText="Employee Code" dataField="empCode"/>             
            </mx:columns>       
        </mx:DataGrid>
        <mx:Button label="Delete Items" click="button1_clickHandler(event)"/>
    </s:VGroup> 


</s:Application>

我使用 ArrayCollection 作为 dataProvider，因为向 Collection 对象添加/删除项目比使用数组更容易。

问候。

【讨论】：

谢谢，但是如果我从数据库中获取数据，我应该在数据库中添加一个新字段以获取复选框值吗？

是否也需要删除数据库记录？

@user594979。然后集中讨论如何用数据库记录识别DataGrid行。您绝对不必将选定字段添加到数据库中。继续我的示例，您可以在检测到 resultArray[i].selected == true 时向 button1_clickHandler 添加一些代码。在代码中执行 SQL DELETE 命令构造语句，如 "DELETE FROM SOME_TABLE t WHERE t.firstNameField=" + resultArray[i].firstName + " 和 t.lastNameField=" + resultArray[i].lastName "。最好将一些 recordId 字段提取到 resultArray 中。Readrds.David。