apache-flex 带复选框的Spark数据网格未正确更新

vshtjzan  于 2022-11-01  发布在  Apache
关注(0)|答案(4)|浏览(189)

当我选择一个或多个数据网格行时,复选框会正确更新,但当我第一次选择复选框时,该复选框直到指针移出数据网格行时才刷新。如何解决此问题?

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

vohkndzv1#

更改此项:

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

收件人:

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

我只是建议您使用enabled属性。
我认为从checkboxgridColumn调度的“click事件”,然后返回的函数阻止了对方。
如果enabled属性设置为false,则单击事件仅在gridColumn上释放,然后使用cb.selected=grid.selectionContainsIndex(rowIndex);正确占用如果要显示复选框已启用,则可以使用CSSskinclass

yhxst69z

yhxst69z2#

最简单的方法是使用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>
jyztefdp

jyztefdp3#

最后我只是这样做:

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

g0czyy6m4#

您可以通过在ItemRenderer中绘制一个CheckBox形状来伪造CheckBox,并使用状态来显示刻度。

<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中。只是可能需要更改一些状态名称。
当你点击CheckBox时,除非你按住CTRL键,否则不会取消选中一行。这是DataGrid组件的默认行为。如果你想阻止这种行为,恐怕你必须创建你自己的DataGri d子类。
另一件重要的事情是:在itemrenderers上设置selected属性并不会更改DataGridselectIndices。因此,在下一个commitProperties()周期中,您在渲染器中设置的值将被DataGrid覆盖。

旧答案:(编辑前)

ItemRenderer类(因此GridItemRenderer类也是)有一个selected属性,所以你可以将复选框selected属性绑定到itemrenders,如下所示:

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

你必须创建一个单独的ItemRenderer类,而不是一个内联类。如果你真的想用内联的方式,你可以覆盖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>

相关问题