Question

当我选择一个或多个数据网格行时，复选框会正确更新，但是当我第一次选中复选框时，复选框不会刷新，直到指针移出数据网格行。我该如何解决这个问题？

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

Answer 1

改变这个：

 <s:CheckBox id="cb" label="" horizontalCenter="0"/>

要：

<s:CheckBox id="cb" label="" horizontalCenter="0" enabled="false"/>

我建议你使用启用的属性。

我认为来自checkbox和gridColumn的已发送“点击事件”，然后返回的功能相互阻止。

如果启用属性设置为false，则您的点击事件仅在gridColumn调度，然后使用cb.selected=grid.selectionContainsIndex(rowIndex);正确占用，如果您要启用复选框，则可以使用CSS或{{1} }

Answer 2

最简单的方法是使用RIAStar建议的渲染选择状态。但是，如果您使用全局蒙皮，自定义绘图不起作用，请使用可换肤容器或我刚刚将复选框放在那里，但不要让它响应鼠标命令。对于多选，只要您的网格设置为多行或多列，您就可以捕获鼠标事件并强制使用ctrl键，使其处理多选。

<s:GridItemRenderer 
    mouseDown="mouseDownHandler(event)"
    mouseUp="mouseUpHandler(event)"
    buttonMode="true"
    mouseChildren="false"
    useHandCursor="true"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    >

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

    <fx:Script>
        <![CDATA[
            protected function mouseUpHandler(event:MouseEvent):void {
                event.ctrlKey = true;
            }

            protected function mouseDownHandler(event:MouseEvent):void {
                event.ctrlKey = true;
            }
        ]]>
    </fx:Script>

    <s:CheckBox 
        id="check"
        selected.normal="false"
        selected.selected="true"
        horizontalCenter="0"
        verticalCenter="0"
        />

</s:GridItemRenderer>

Answer 3

我最终只是这样做了：

            <s:GridColumn dataField="myBoolean" headerText="Returned" width="55">
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                                <s:CheckBox id="cb1" selected="{data.myBoolean}" change="{data.myBoolean=cb1.selected}"/>                                                           
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>

Answer 4

您可以通过在CheckBox中绘制CheckBox形状来伪造ItemRenderer并使用状态来显示勾号。

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

这是复选框的简化图形，但您可以从spark CheckBoxSkin中获取代码并将其复制/粘贴到itemrenderer中。可能不得不改变一些州名。

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

要了解的另一件重要事项：在selected上设置itemrenderers属性不会更改selectIndices的{{1}}。因此，在下一个DataGrid周期中，您在渲染器中设置的值将被commitProperties()覆盖。

旧答案：（编辑前）

DataGrid类（以及ItemRenderer类）也有GridItemRenderer属性。因此，您可以将复选框selected属性绑定到selected，如下所示：

itemrenders

您必须为其创建一个单独的<s:CheckBox selected="{selected}" horizontalCenter="0" />类，而不是内联类。如果您绝对想要采用内联方式，则可以始终覆盖ItemRenderer setter。

selected

带复选框的Spark数据网格无法正确更新

4 个答案: