带有复选框的Spark datagrid无法正确更新 [英] Spark datagrid with checkbox does not update correctly

问题描述

当我选择一个或多个datagrid行时，但是当我选择一个复选框时，复选框不刷新，直到指针移出datagrid行，这些复选框才会正确更新。如何解决此问题？

 <？xml version =1.0encoding =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> 
< s：DataGrid id =dgx =344y =48selectionMode =multipleRowsrequestedRowCount =4> 
< s：columns> 
< s：ArrayList> 
< s：GridColumn> 
< s：itemRenderer> 
< fx：Component> 
< s：GridItemRenderer> 
< fx：Script> 
<！[CDATA [
 import mx.controls.Alert; 
 import spark.components.DataGrid; 
 
 override public function prepare（hasBeenRecycled：Boolean）：void 
 {
 cb.selected = grid.selectionContainsIndex（rowIndex）; 
} 
]]> 
< / fx：Script> 
< s：CheckBox id =cblabel =horizo​​ntalCenter =0/> 
< / s：GridItemRenderer> 
< / fx：Component> 
< / s：itemRenderer> 
< / s：GridColumn> 
< s：GridColumn dataField =dataField1headerText =Column 1>< / s：GridColumn> 
< s：GridColumn dataField =dataField2headerText =Column 2>< / s：GridColumn> 
< s：GridColumn dataField =dataField3headerText =Column 3>< / s：GridColumn> 
< / s：ArrayList> 
< / s：columns> 
< s：typicalItem> 
< fx：Object dataField1 =Sample DatadataField2 =Sample DatadataField3 =Sample Data>< / fx：Object> 
< / s：typicalItem> 
< s：ArrayList> 
< fx：Object dataField1 =data1dataField2 =data1dataField3 =data1>< / fx：Object> 
< fx：Object dataField1 =data2dataField2 =data2dataField3 =data2>< / fx：Object> 
< fx：Object dataField1 =data3dataField2 =data3dataField3 =data3>< / fx：Object> 
< fx：Object dataField1 =data4dataField2 =data4dataField3 =data4>< / fx：Object> 
< / s：ArrayList> 
< / s：DataGrid> 
   

解决方案

在 ItemRenderer 中绘制复选框形状并使用状态显示勾号。

 < s：GridItemRenderer> 
< s：states> 
< s：State name =normal/> 
< s：State name =hovered/> 
< s：State name =selected/> 
< / s：states> 
 
<！ -  checkbox graphics  - > 
< s：Group width =16height =16horizo​​ntalCenter =0verticalCenter =0> 
< s：Rect left =0right =0top =0bottom =0> 
< s：fill> 
< s：SolidColor color =0xffffff/> 
< / s：fill> 
< s：stroke> 
< s：SolidColorStroke color =0xa9aeb2/> 
< / s：stroke> 
< / s：Rect> 
 
<！ -  tick，仅在选中时显示 - > 
< s：Rect includeIn =selectedwidth =8height =8horizo​​ntalCenter =0verticalCenter =0> 
< s：fill> 
< s：SolidColor color =0x90b40c/> 
< / s：fill> 
< / s：Rect> 
< / s：Group> 
< / s：GridItemRenderer> 
  

这是复选框的简化图形，但您可以从spark < c $ c> CheckBoxSkin 并将其复制/粘贴到 itemrenderer 中。

当你点击 CheckBox 时，不会取消选择单个行。 ，除非您按住 CTRL 键。这是 DataGrid 组件的默认行为。恐怕你必须创建自己的子类 DataGri d，如果你想防止这种行为。

另一个重要的事情要知道：在 itemrenderers 上设置 selected 属性不会更改<$ c $ DataGrid 中的 selectIndices 。因此，在下一个 commitProperties（）循环中，您在渲染器中设置的值将被 DataGrid p>

旧答案（编辑前）

ItemRenderer 类（因此 GridItemRenderer 类）具有选择属性。
因此，您可以将复选框选中的属性绑定到 itemrenders ，如下所示：

 < s：CheckBox selected ={selected}horizo​​ntalCenter =0/& 
  

您必须创建一个单独的 ItemRenderer 类为工作，而不是一个内联的。
如果你绝对想以内联的方式，你总是可以覆盖选择的设置器。

 < s：GridItemRenderer> 
< fx：Script> 
<！[CDATA [
 override public function set selected（value：Boolean）：void {
 super.selected = cb.selected = value; 
} 
]]> 
< / fx：Script> 
< s：CheckBox id =cbhorizo​​ntalCenter =0/> 
< / s：GridItemRenderer> 
  




The checkboxes are updated correctly when I select one or more datagrid rows but when I select a checkbox for the first time the checkbox does not refresh until the pointer moves out of the datagrid row. How can I fix this?

<?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">
    <s:DataGrid id="dg" x="344" y="48" selectionMode="multipleRows" requestedRowCount="4">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <fx:Script>
                                    <![CDATA[
                                        import mx.controls.Alert;
                                        import spark.components.DataGrid;

                                        override public function prepare(hasBeenRecycled:Boolean):void
                                        {
                                            cb.selected = grid.selectionContainsIndex(rowIndex);
                                        }
                                    ]]>
                                </fx:Script>
                                <s:CheckBox id="cb" label="" horizontalCenter="0"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
                <s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
                <s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
                <s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
            </s:ArrayList>
        </s:columns>
        <s:typicalItem>
            <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
        </s:typicalItem>
        <s:ArrayList>
            <fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
            <fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
            <fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
            <fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
        </s:ArrayList>
    </s:DataGrid>
</s:Application>

解决方案

You can just fake the CheckBox by drawing a CheckBox shape in the ItemRenderer and use the states to show the tick.

<s:GridItemRenderer>
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>

    <!-- checkbox graphics -->
    <s:Group width="16" height="16" horizontalCenter="0" verticalCenter="0">
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:fill>
                <s:SolidColor color="0xffffff" />
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="0xa9aeb2" />
            </s:stroke>
        </s:Rect>

        <!-- tick, only shown when selected -->
        <s:Rect includeIn="selected" width="8" height="8" horizontalCenter="0" verticalCenter="0">
            <s:fill>
                <s:SolidColor color="0x90b40c" />
            </s:fill>
        </s:Rect>
    </s:Group>
</s:GridItemRenderer>

This is a simplified graphic for a checkbox, but you can go grab the code from the spark CheckBoxSkin and copy/paste it in the itemrenderer. Just might have to change some state names.

This will not deselect a single row though when you hit the CheckBox of an already selected row, unless you hold the CTRL key down. That's the default behavior of the DataGrid component. I'm afraid you'll have to create your own subclass of DataGrid if you want to prevent that behavior.

Another important thing to know: setting the selected property on the itemrenderers doesn't change the selectIndices of the DataGrid. Hence on the next commitProperties() cycle the value you set in the renderer will be overridden by the DataGrid.

Old answer: (before edit)

The ItemRenderer class (and thus the GridItemRenderer class too) has a selected property. So you could bind the checkboxes selected property to the itemrenders, like so:

<s:CheckBox selected="{selected}" horizontalCenter="0" />

You'd have to create a separate ItemRenderer class for that to work though instead of an inline one. If you absolutely want to go the inline way you can always override the selected setter.

<s:GridItemRenderer>
  <fx:Script>
  <![CDATA[
      override public function set selected(value:Boolean):void {
          super.selected = cb.selected = value;
      }
  ]]>
  </fx:Script>
  <s:CheckBox id="cb" horizontalCenter="0"/>
</s:GridItemRenderer>

这篇关于带有复选框的Spark datagrid无法正确更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！