Flex将XML数据编程tree树形

sungang_1120

浏览: 322173 次
性别:
来自: 成都

最近访客更多访客>>

bxl994

eplang

zhongzunfa

sdyjmc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

细细品味-Flex

txl.xml如下：

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

<data value="XX通讯录">
	<data1 value="办公室">
		<xm value="冯XX" bg="4278952XX" tel="135948659XX"/>
		<xm value="李XX" bg="6464664XX" tel="134589645XX"/>
		<xm value="张XX" bg="4546464XX" tel="130464977XX"/>
		<xm value="王XX" bg="9469467XX" tel="158946113XX"/>
	</data1>
	<data2 value="销售处">
		<xm value="冯XX" bg="4278952XX" tel="135948659XX"/>
		<xm value="李XX" bg="6464664XX" tel="134589645XX"/>
		<xm value="张XX" bg="4546464XX" tel="130464977XX"/>
		<xm value="王XX" bg="9469467XX" tel="158946113XX"/>
	</data2>
	<data3 value="技术部">
		<xm value="冯XX" bg="4278952XX" tel="135948659XX"/>
		<xm value="李XX" bg="6464664XX" tel="134589645XX"/>
		<xm value="张XX" bg="4546464XX" tel="130464977XX"/>
		<xm value="王XX" bg="9469467XX" tel="158946113XX"/>
	</data3>
	<data4 value="财务部">
		<xm value="冯XX" bg="4278952XX" tel="135948659XX"/>
		<xm value="李XX" bg="6464664XX" tel="134589645XX"/>
		<xm value="张XX" bg="4546464XX" tel="130464977XX"/>
		<xm value="王XX" bg="9469467XX" tel="158946113XX"/>
	</data4>
	<data5 value="行政部">
		<xm value="冯XX" bg="4278952XX" tel="135948659XX"/>
		<xm value="李XX" bg="6464664XX" tel="134589645XX"/>
		<xm value="张XX" bg="4546464XX" tel="130464977XX"/>
		<xm value="王XX" bg="9469467XX" tel="158946113XX"/>
	</data5>
	
</data>

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 mx.events.FlexEvent;
			import mx.events.ListEvent;
			import mx.rpc.events.ResultEvent;
			
			[Bindable]
			private var data1 : XML;
			
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				http.send();
			}


			protected function http_resultHandler(event:ResultEvent):void
			{
				data1 = event.result as XML;
				tree1.dataProvider = data1;
			}


			protected function tree1_itemClickHandler(event:ListEvent):void
			{
				bgtel.text = tree1.selectedItem.@bg;
				sjtel.text = tree1.selectedItem.@tel;
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<s:HTTPService id="http" url="txl.xml" resultFormat="e4x" result="http_resultHandler(event)"/>
			
	</fx:Declarations>
	<s:Panel x="10" y="37" width="458" height="275" title="通讯录" id="panel1">
		<mx:Tree x="0" y="0" width="224" height="242" id="tree1" labelField="@value" itemClick="tree1_itemClickHandler(event)"></mx:Tree>
		<s:TextInput x="307" y="49" id="bgtel"/>
		<s:TextInput x="310" y="132" id="sjtel"/>
		<s:Label x="251" y="56" text="办公电话" height="22" width="62"/>
		<s:Label x="256" y="138" text="手机号码" width="54"/>
		<s:Label x="251" y="10" text="点击某个人时，此处就会显示出来这个人的通讯信息" width="171" height="31"/>
	</s:Panel>
</s:Application>

效果如下：