Question

我正在使用数据网格和项呈示器来创建切换按钮。 我们的想法是拥有一个项目列表，并且只允许选择一个项目并在开始时预先选择一项。

我已经选择了单个按钮，这意味着当我点击切换按钮时，其他按钮将被取消选择。

我的问题是创建一种预先选择数据网格元素的方法，或模拟行上的点击并选择相应的切换按钮。

如果我使用datagrid.selectedIndex，结果是选择，但切换按钮不会被选中。

以下是代码示例

在这个例子中我使用数组值“选择”来定义所选按钮，而不是我最喜欢的解决方案，而是首先工作的解决方案。

数组集合：

public static const ValuesList : ArrayCollection = new ArrayCollection(
    [
    {ID:0, Name:"One", selected:false},
    {ID:1, Name:"Two",       selected:false},
    {ID:2, Name:"Three",         selected:false},
    {ID:3, Name:"Four",  selected:false}
    ]
);

数据网格：

<s:DataGrid id="dataGrid" dataProvider={ValuesList} >
 <s:columns>
    <s:ArrayList>
        <s:GridColumn id="GridCol0" />
        <s:GridColumn id="GridCol1" />
        <s:GridColumn id="GridCol2" itemRenderer = "detail_ItemRenderer" />
    </s:ArrayList>
 </s:columns>
</s:DataGrid>

列项呈示器：

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                    clipAndEnableScrolling="true">

  <fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        /**
         * Creatioon complete event handler to set toggle button content value.
         * */
        protected function MyToggleButton_creationCompleteHandler(event:FlexEvent) : void
        {
            MyListToggleButton.label = data.Name;
            MyToggleButton.selected = data.selected;
        }

        /**
         * One of the only function that are called on item interaction.
         * */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            MyToggleButton.selected = data.selected;
        }
    ]]>
</fx:Script>

<s:ToggleButton id="MyToggleButton" width="100%" height="100%"
                creationComplete="MyToggleButton_creationCompleteHandler(event)" />

</s:GridItemRenderer>

解决方案：

使用数据数组将信息传递到切换按钮。将一个值设置为“true”将显示所选元素。

为确保数据完整性，我建议将网格的选定索引设置为设置为“true”的值的相应索引：

public function SetSelectedIndexByName() : int
{
for (var i : int=0; i < dataGrid.dataProvider.length ; i++)
{
    if (dataGrid.dataProvider[i].toString().toUpperCase() == "TRUE")
    {
        return i;
    }
}
return -1;
 }

Answer 1

在GridItemRenderer中，您应该覆盖data的设置者。您的数据将包含一个定义ToggleButton选择的变量。在setter中，您可以根据此变量切换按钮。

要仅选择一个按钮，您可以在渲染器中使用静态变量来存储所选的itemrenderer。这个更简单，但不是很干净，因为它是数据而不是渲染器。因此，您可以从更高级别监听dataProvider中的任何更改，并确保只选择了一个项目。

Flex：模拟数据网格的项呈示器内的按钮单击

1 个答案: