Flex/DataGrid：更新dataProvider的每一行更改

Question

在DataGrid中，當我更新dataProvider時，如何強制調用可見行上的所有itemRenderer的data（）。

下面我按下doSomething後沒有更新網格。如果我有一個大的列表，更新是在向下滾動然後再次備份時完成的，或者在TreeGrid的情況下，我打開/關閉一個節點。

<?xml version="1.0" ?> 
<mx:VBox 
xmlns:mx="http://www.adobe.com/2006/mxml" 
xmlns:flexlib="http://code.google.com/p/flexlib/" 
initialize="_initialize()"> 

<mx:Script> 
<![CDATA[ 

    import mx.events.CollectionEvent; 

    import mx.controls.Alert; 
    import Icons; 

    [Bindable] 
    private var dataProvider0:XML; 

    private function _initialize():void 
    { 
     dataProvider0 = <node> 
       <node label="A" option="1"> 
        <node label="C" option="1"/> 
        <node label="D" option="1"/> 
       </node> 
       <node label="B" option="1"> 
        <node label="E" option="1"/> 
        <node label="F" option="1"/> 
       </node> 
      </node>; 

    } 

    private function doSomething():void 
    { 

     dataProvider0.node[0].@option = 0; 
     dataProvider0.node[0].node[0].@option = 0; 


    } 


]]> 
</mx:Script> 

<flexlib:TreeGrid 
    id="treeGrid1" 
    width="500" 
    height="300" 
    showRoot="false" 
    verticalTrunks="none" 
    paddingLeft="0" 
    disclosureClosedIcon="{Icons.folderClosed}" 
    disclosureOpenIcon="{Icons.folderOpen}" 
    dataProvider="{dataProvider0}"> 

    <flexlib:columns> 
     <flexlib:TreeGridColumn dataField="@label" headerText="Section"/> 
     <mx:DataGridColumn dataField="@option" headerText="Option" width="50"> 
      <mx:itemRenderer> 
       <mx:Component> 

        <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" verticalAlign="middle" horizontalAlign="center" width="100%" height="100%"> 

         <mx:Script> 
         <![CDATA[ 

          [Bindable] 
          override public function set data(value:Object):void 
          { 
           super.data = value; 
           chkMain.selected = value.@option == "1"; 
          } 

         ]]> 
         </mx:Script> 

         <mx:CheckBox id="chkMain"/> 

        </mx:Box> 

       </mx:Component> 
      </mx:itemRenderer> 
     </mx:DataGridColumn> 
    </flexlib:columns> 

</flexlib:TreeGrid> 

<mx:DataGrid 
    id="dataGrid1" 
    width="500" 
    height="300" 
    dataProvider="{dataProvider0.node}"> 

    <mx:columns> 
     <mx:DataGridColumn dataField="@label" headerText="Section"/> 
     <mx:DataGridColumn dataField="@option" headerText="Option" width="50"> 
      <mx:itemRenderer> 
       <mx:Component> 

        <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" verticalAlign="middle" horizontalAlign="center" width="100%" height="100%"> 

         <mx:Script> 
         <![CDATA[ 

          [Bindable] 
          override public function set data(value:Object):void 
          { 
           super.data = value; 
           chkMain.selected = value.@option == "1"; 
          } 

         ]]> 
         </mx:Script> 

         <mx:CheckBox id="chkMain"/> 

        </mx:Box> 

       </mx:Component> 
      </mx:itemRenderer> 
     </mx:DataGridColumn> 
    </mx:columns> 

</mx:DataGrid> 

<mx:Button label="Do" click="doSomething()"/> 

</mx:VBox> 

Answer 1

你試過

private function doSomething():void 
{ 

    dataProvider0.node[0].@option = 0; 
    dataProvider0.node[0].node[0].@option = 0; 

    // force a redraw at earliest opportunity 
    treeGrid1.invalidateDisplayList(); 

} 

Answer 2

試試這個：

private function doSomething():void 
{ 
    dataProvider0.node[0].@option = 0; 
    dataProvider0.node[0].node[0].@option = 0; 

    treeGrid1.dataProvider.refresh(); 
    dataGrid1.dataProvider.refresh(); 
}