Flex之DataGrid和Tree控件的数据源XML格式

1、flex的完整代码：

<?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" minWidth="955" minHeight="600"

               creationComplete="application1_creationCompleteHandler(event)">

    <s:layout>

        <s:BasicLayout/>

    </s:layout>

    <fx:Script>

        <![CDATA[

            import flexunit.utils.ArrayList;

            

            import mx.collections.ArrayCollection;

            import mx.controls.Alert;

            import mx.events.FlexEvent;

            import mx.events.ListEvent;

            import mx.rpc.events.FaultEvent;

            import mx.rpc.events.ResultEvent;

            [Bindable]

            private var treeData:XML;

            

            private var dgData:ArrayCollection = new ArrayCollection();

            private var dgXml:XML = new XML();

            public var xmlList:ArrayList = new ArrayList();



            protected function application1_creationCompleteHandler(event:FlexEvent):void

            {

                httpTree.send();//发送请求            

              }



            protected function httpTree_resultHandler(event:ResultEvent):void

            {

                treeData =  event.result as XML;//获取xml数据对象

                   tr.dataProvider = treeData;     //绑定数据

              }

            

            protected function tree1_itemClickHandler(event:ListEvent):void

            {

                tNumber.text=tr.selectedItem.@value;

                tTel.text=tr.selectedItem.@tel;

            }





            protected function httpTree_faultHandler(event:FaultEvent):void

            {

                Alert.show(event.fault.toString());

            }



            /**

             * 把XMLList转换成ArrayList，适用于从数据库获得的数据，将XMLList每行数据转换成Object。每列数据转换成Object的同名称属性

             * @param data 要转换的XMLList

             * @return 转换之后的ArrayList。

             */



            private function getArrayListFormXmlList(data:XMLList):ArrayList

            {

                var al:ArrayList=new ArrayList();

                for(var i:int=0;i<data.length();i++) //取对象

                   { 

                    var obj:Object=new Object();

                    for(var j:int=0;j<data[i].children().length();j++) //取对象下的结点 id,name,age

                    {

                        var dataColoum:String=data[i].children()[j].localName();

                        obj[dataColoum]=data[i].children()[j].toString();

                    }

                    al.addItem(obj);

                 }

                 return al;

            } 

            

            protected function httpDataGrid_resultHandler(event:ResultEvent):void

            {

                dgXml = event.result as XML;

                xmlList = getArrayListFormXmlList(dgXml.children());                

                for(var i:int=0;i<xmlList.length();i++){

                    dgData.addItem({id:xmlList.getItemAt(i).id,name:xmlList.getItemAt(i).name,

                                    age:xmlList.getItemAt(i).age});

                }

                dg.dataProvider=dgData;

            }





            protected function bt_clickHandler(event:MouseEvent):void

            {

                httpDataGrid.send();

            }



        ]]>

    </fx:Script>

    <fx:Declarations>

        <s:HTTPService id="httpTree" resultFormat="e4x" url="tree.xml" fault="httpTree_faultHandler(event)" 

                       result="httpTree_resultHandler(event)"/>

        <s:HTTPService id="httpDataGrid" resultFormat="e4x" url="users.xml" result="httpDataGrid_resultHandler(event)" />

    </fx:Declarations>

    

    <s:Panel x="120" y="49" width="568" height="248">

        <mx:Tree x="11" y="10" id="tr" labelField="@value"  itemClick="tree1_itemClickHandler(event)" width="234"></mx:Tree>

        <s:Label x="267" y="30" text="部门编号"/>

        <s:Label x="295" y="102" text="电话"/>

        <s:TextInput x="342" y="20" id="tNumber"/>

        <s:TextInput x="342" y="92" id="tTel"/>

    </s:Panel>

    <mx:DataGrid x="143" y="305" id="dg">

        <mx:columns>

            <mx:DataGridColumn headerText="编号" dataField="id"/>

            <mx:DataGridColumn headerText="姓名" dataField="name"/>

            <mx:DataGridColumn headerText="年龄" dataField="age"/>

        </mx:columns>

    </mx:DataGrid>

    <s:Button x="496" y="339" label="导入" id="bt" click="bt_clickHandler(event)"/>

</s:Application>

2、准备数据源：

　　users.xml

<?xml version="1.0" encoding="UTF-8"?>

<users>

    <user>

        <id>100001</id>

        <name>张三</name>

        <age>18</age>

    </user>

    <user>

        <id>100002</id>

        <name>李四</name>

        <age>21</age>

    </user>

    <user>

        <id>100003</id>

        <name>赵柯</name>

        <age>22</age>

    </user>

    <user>

        <id>100004</id>

        <name>王利</name>

        <age>19</age>

    </user>

</users>

　　tree.xml:

<?xml version="1.0" encoding="UTF-8"?>

<data value="通讯录">

    <data1 value="人力资源部">

        <xm value="1001" tel="1299991999"/>

        <xm value="1002" tel="1299992399"/>

        <xm value="1003" tel="1299991993"/>

    </data1>

    <data2 value="技术部">

        <xm value="1001" tel="1299994999"/>

        <xm value="1002" tel="1299994399"/>

        <xm value="1003" tel="1299994993"/>

    </data2>

    <data3 value="开发部">

        <xm value="1001" tel="3299991999"/>

        <xm value="1002" tel="1399992399"/>

        <xm value="1003" tel="1499991993"/>

    </data3>

</data>

3、测试结果：