向Flex DataGrid中动态加入行（二）——直接加入

当使用Flex中的DataGrid时，我们想实现的众多功能能之一就是动态的将数据添加到DataGrid的新的一行中。现在可以有很多方法实现这个想法。一个方法就是运用一个弹出框，往表格所绑定的数组集合中添加数据项。另一个方法就是直接向表格里面添加新的一行。这篇教程即将讨论的是上述方法的第二种。

下面的例子演示了我们今天要创建的表格。

下面的代码中，在程序初始化窗口中添加一个DataGrid。网格有三列。注意：DataGrid的属性sortableColumns设置为false，这样做是因为当添加新的一行时，排序功能不一定会保持正常工作，除非添加一些额外的代码。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
                        >
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        global
        {
            font-size:15;
            font-family:微软雅黑;
        }
    </fx:Style>
    <mx:DataGrid id="myDataGrid" sortableColumns="false" editable="true" width="100%" height="100%">
        <mx:columns>
            <mx:DataGridColumn headerText="姓名" dataField="nam" width="100"/>
            <mx:DataGridColumn headerText="电话" dataField="tel" width="100"/>
            <mx:DataGridColumn headerText="地址" dataField="add" width="100"/>
        </mx:columns>
    </mx:DataGrid>
</s:WindowedApplication>

接下来就是创建一个用于绑定数据的类：

 

package
{
    [Bindable]
    public class People
    {
        public var nam:String;
        public var tel:String;
        public var add:String;
        
        public function People(nam:String, tel:String, add:String)
        {
            this.nam = nam;
            this.tel = tel;
            this.add = add;
        }
    }
}

 

之后，就可以用创建的Task类，在应用程序的组件完成其构建时分派的事件creationComplete中，往表格里面创建两行数据。

 

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            
            [Bindable]
            private var peoples:ArrayCollection;

            protected function init(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                peoples = new ArrayCollection();
                peoples.addItem(new People("张三","13912345678","北京市"));
                peoples.addItem(new People("李四","15012345678","沈阳市"));
            }
            
        ]]>
    </fx:Script>

同时，我们也需要将DataGrid的数据提供者绑定到数组上面：

<mx:DataGrid id="myDataGrid" sortableColumns="false" editable="true" width="100%" height="100%" dataProvider="{peoples}">

 

至此，上述步骤都是我们在运用datagrid时十分常见的。

接下来，我们要开始往表格里面键入新的数据项并添加新的一行数据。

首先，我们要创建一个虚拟的行，从而往里面添加新的数据项。因此，我们要修改init函数并且要增加一个字符串常量来显示这个虚拟行。

 

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            
            [Bindable]
            private var peoples:ArrayCollection;
            private static const ADD_PEOPLE:String = "Click to Add People";

            protected function init(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                peoples = new ArrayCollection();
                peoples.addItem(new People("张三","13912345678","北京市"));
                peoples.addItem(new People("李四","15012345678","沈阳市"));
                peoples.addItem({title: ADD_PEOPLE});
            }
            
        ]]>
    </fx:Script>

 

接下来就要处理两个DataGrid中的事件：

itemEditBeginning：当用户在某个项呈示器上方释放鼠标按键时，使用 tab 键导航到 DataGrid 控件或 DataGrid 控件内部时，或者以任何其他方式尝试编辑某一项目时分派。

事件函数：checkEdit 

protected function checkEdit(event:DataGridEvent):void
            {
                // Do not allow editing of Add People row except for 
                // "Click to Add" column
                if(event.rowIndex == peoples.length - 1 && event.columnIndex != 0)
                {
                    event.preventDefault();
                }
            }

itemEditEnd：当项目编辑会话因任何原因而结束时分派。

事件函数：editEnd

 

protected function endEdit(event:DataGridEvent):void
            {
                // Adding a new People
                if(event.rowIndex == peoples.length - 1)
                {
                    var txtIn:TextInput = TextInput(event.currentTarget.itemEditorInstance);
                    var dt:Object = event.itemRenderer.data;
                    
                    // Add new People
                    if(txtIn.text != ADD_PEOPLE)
                    {
                        peoples.addItemAt(new People(txtIn.text, "tel", "add"), event.rowIndex);
                    }
                    // Destroy item editor
                    myDataGrid.destroyItemEditor();
                    
                    // Stop default behavior 
                    event.preventDefault();
                }
            }