フレックスのDataGridから選択した行を削除する

Question

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> 

私はまた、データグリッド外のボタンがあり、このボタンをクリックしたときに、私がチェックチェックボックスを持っているすべての行を削除したいです。誰かがこれをする方法を教えてもらえますか？

Answer 1

HI！

まず、すべてのDataGrid行に独自のItemRendererインスタンスがあるわけではないので、コードは正しく動作しません。 n個のVISIBLE行を持つDataGridには、正確にn個のアイテムレンダラーインスタンスがあります。 DataGridを作成してすべてのデータに収まらない場合や、行を選択してDataGridを上下にスクロールすると、これを簡単に確認できます。予期しない結果が表示されます。

解決策の1つは、resultArrayアイテムのプロパティで、「選択済み」（または名前を付けたい名前）の追加フィールドを持つ可能性があります。次に、ItemRendererの "data"オブジェクトを通じてこのプロパティにアクセスできます。

<?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> 

/追加し配列にコレクションオブジェクトに項目を削除するために非常に簡単ですMORとして、私はdataProviderのようにArrayCollectionを使用：以下のコードを確認してください。

よろしくお願いいたします。