Flex DataGrid 通过单击事件添加新行

Question

我正在尝试实现以下功能：

Flex 数据网格创建了 1 个默认行。当用户点击第二行时，需要创建一个新行并使其可编辑。

这已经是可行的了——用户在列上使用标签，当用户在最后一列中使用标签时，会使用默认值创建一个新行。

这也是已经起作用的 - 用户单击网格外的按钮，这会添加一个新行。

（已实现itemEditBegin和itemEditEnd）

以下是不起作用的：当我“单击”第二行时（还没有数据 - 行为空），我如何检测当前单击的行是第二行并使其可编辑？我可以从 MouseEvent 中找出 rowIndex 并使用它来添加新行吗？

在下面找到代码：

<mx:DataGrid id="myGrid" editable="true" click="clickEvent(event)"
     itemEditEnd="endEdit(event)" itemEditBegin="beginEdit(event)" variableRowHeight="true" >

private function clickEvent(ev:Event):void
{
    var i:Object = MouseEvent(ev).currentTarget;
        // is this the right event?
}

Answer 1

很好的问题，DataGrid 支持在 DataGrid 的 dataProvider 中选择对象。但它不允许轻松选择/鼠标悬停其中没有项目的行（空行）。

1) 我会在 DataGrid 的末尾放置一个虚拟行，以便 DataGrid 可以轻松选择它。
2) 否则，我会检查 mouseX/mouseY 是否在您刚刚单击的空行的参数内（使用空行的全局 X、Y、宽度、高度属性）。

让我知道什么是有效的。

Answer 2

如果没有数据，就不会有任何行或 itemRenderer，因此技术上没有行索引。 e.target 将包含 ListBaseContentHolder，e.currentTarget 将包含 DataGrid 本身。但是，您可以使用鼠标-y 位置来计算单击位置处将出现的行。这是一个肮脏的小技巧 - 它没有经过彻底测试，因此可能会在边缘情况下失败。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    xmlns:local="*" creationComplete="create();">
    <mx:DataGrid id="myGrid" editable="true" click="clickEvent(event)"
     variableRowHeight="true" >
    <mx:columns>
        <mx:DataGridColumn dataField="d"/>
        <mx:DataGridColumn/>
    </mx:columns>
    </mx:DataGrid>
    <mx:Script>
        <![CDATA[
            import mx.controls.listClasses.ListRowInfo;
            import mx.controls.listClasses.ListBaseContentHolder;
            private function clickEvent(e:MouseEvent):void
            {
                if(!(e.target is ListBaseContentHolder))
                    return;
                var holder:ListBaseContentHolder = 
                    ListBaseContentHolder(e.target);
                var rowIndex:Number = -1;
                var length:Number = holder.rowInfo.length;
                var rowInfo:ListRowInfo;
                for(var i:Number = 0; i < length; i++)
                {
                    rowInfo = holder.rowInfo[i];
                    if(e.localY > rowInfo.y && 
                        e.localY < rowInfo.y + rowInfo.height)
                    {
                        rowIndex = i;
                        break; 
                    }
                }
                trace("Clicked on " + rowIndex);
            }
            private function create():void
            {
                myGrid.dataProvider = [{d:"A"},{d:"B"}];
            }
        ]]>
    </mx:Script>
</mx:Application>