Question

我们有数据网格，我们在其第一列中列出了带复选框的产品。复选框用于选择网格中的产品。 datagrid的标题标题中还有一个复选框。

现在，我们想要，如果我们检查标题标题中的复选框，那么系统会检查datagrid中的所有产品。

以下是代码，我们使用了：

<s:DataGrid dataProvider="{endListingArr}" x="20" y="61" height="100%" width="100%" id="product_end_list_grid" creationComplete="end_list_grid_reference(event)">
<s:columns>
 <s:ArrayList>
   <s:GridColumn dataField="" headerText="" width="50" headerRenderer="com.pims.renderers.ebay_end_list_header_checkbox" sortable="false">                                                
   <s:itemRenderer>
   <fx:Component>
      <s:GridItemRenderer xmlns:mx="library://ns.adobe.com/flex/mx" >
        <fx:Script>  
          <![CDATA[
              import mx.core.FlexGlobals;
              [Bindable] private var showCheckbox:Boolean = true;

               private function changeSelection(item:Object):void{
                   item.selected = !item.selected
                   if(item.selected == false){
                     FlexGlobals.topLevelApplication.isEbayEndListHeaderChecked = false;
                   }
               }                                                                 
          ]]>
       </fx:Script>                                                           
       <s:HGroup horizontalAlign="center" paddingTop="5" paddingLeft="18" visible="{showCheckbox}" includeInLayout="{showCheckbox}">
         <s:CheckBox selected="{data.selected}" click="changeSelection(data)" />
       </s:HGroup>                                                  
    </s:GridItemRenderer>                                           
   </fx:Component>
  </s:itemRenderer>
  </s:GridColumn>
  <s:GridColumn dataField="sku" headerText="SKU" />
  <s:GridColumn dataField="product_name" headerText="Product Name" />
  <s:GridColumn dataField="ebay_item_id" headerText="Ebay online Id"/>
  <s:GridColumn dataField="store_name" headerText="Store"/>
  <s:GridColumn dataField="end_date" headerText="End Time"/>
  <s:GridColumn dataField="status" headerText="End Status"/>                                         
 </s:ArrayList>
 </s:columns>
 </s:DataGrid>

标题复选框渲染器（ebay_end_list_header_checkbox.mxml）：

<s:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"                            xmlns:s="library://ns.adobe.com/flex/spark"                        xmlns:mx="library://ns.adobe.com/flex/mx">  
<fx:Script>
 <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.core.FlexGlobals;

   private var item:Object;
   protected function hcb_clickHandler(event:MouseEvent):void
   {
     var products:ArrayCollection = FlexGlobals.topLevelApplication.ebay_end_list_data_grid.dataProvider as ArrayCollection;
     if(CheckBox(event.currentTarget).selected){
        FlexGlobals.topLevelApplication.isEbayEndListHeaderChecked = true;
        for each(item in products){
    item.selected = true;
    }
}else{                       
        FlexGlobals.topLevelApplication.isEbayEndListHeaderChecked = false;
    for each(item in products){
    item.selected = false;
    }
}
FlexGlobals.topLevelApplication.ebay_end_list_data_grid.dataProvider = products;
products.refresh();
  }
 ]]>
 </fx:Script>
 <s:HGroup width="100%" horizontalAlign="center" verticalAlign="middle" paddingLeft="3">
   <s:CheckBox id="hcb" click="hcb_clickHandler(event)" selected="{FlexGlobals.topLevelApplication.isEbayEndListHeaderChecked}"/>       
 </s:HGroup>
 </s:DefaultGridHeaderRenderer>

以下是在检查标题复选框之前的数据网格的srceen镜头：
enter image description here

现在，当我们选中标题栏中的复选框时，系统正在跳过几行以检查下面的屏幕截图：

enter image description here

任何人都可以告诉我们，代码有什么问题？为什么跳过几行检查？

等待解决方案。

Answer 1

尝试将此代码放在s：GridItemRenderer脚本中在给你的复选框提供id后（例如'chk'）

override public function set data(value:Object):void{
     super.data = value;
     try{
           chk.selected = data.selected == true ? true : false
     }
     catch(e:error){}

     }
}

希望这会有所帮助

Answer 2

我可以建议更好的方法吗？

从您的自定义HeaderRenderer

，当用户单击该复选框时，调度包含布尔标志（已选中或未选中）的自定义事件。我们称之为checkBoxEvent

从datagrid的容器中，提供一个事件监听器来处理checkboxEvent。然后您的事件处理程序将更新您的模型。我们称之为模型myModel。这是一个示例代码：

for each(var item:MyVO in myModel.listOfThings)  {
    item.selected = checkBoxEvent.selected;
}
myModel.listOfThings.refresh();

确保您的模型具有可绑定性，并在复选框项目渲染器中覆盖“set data（）”。

override public function set data(value:Object):void{
     super.data = value;
     if (data) {
         checkbox.selected = data.selected;   // data.selected is boolean
     }
}

我认为这里滥用了FlexGlobals.topLevelApplication。

无法检查Flex中的所有datagrid行

2 个答案: