Flex4树的操作

最新推荐文章于 2017-06-14 23:06:11 发布

飞龙剑

最新推荐文章于 2017-06-14 23:06:11 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flex 文章标签： flex datagrid xml application function import

本文链接：https://blog.youkuaiyun.com/feilongjian001/article/details/6883294

Flex 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用Flex框架中的Tree和DataGrid组件，并演示了XML数据与ArrayCollection之间的相互转换过程。通过实例展示了创建树形结构、绑定数据、添加及删除节点等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源文件布局

源代码：

1、treeData.xml

   <?xml version="1.0" encoding="UTF-8"?>
<tree id="01" name="GJ" value="国家">
 <data id="0101" name="ZG" value="中国">
  <data id="010101" name="BJ" value="北京"></data>
 </data>
 <data id="0102" name="MG" value="美国">
  <data id="010201" name="NY" value="纽约"></data>
 </data>
</tree>

2、demo_tree.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="application1_creationCompleteHandler(event)"
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 <s:layout>
  <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.events.CloseEvent;
   import mx.events.FlexEvent;
   import mx.rpc.events.ResultEvent;
   
   [Bindable]
   private var d:XML;
   
   [Bindable]
   private var dataGrid:ArrayCollection = new ArrayCollection(); //网格数据
   
   /*启动*/
   protected function application1_creationCompleteHandler(event:FlexEvent):void
   {
    hs.send();//调用HttpService加载XML树
   }
   
   /*加载树回归事件*/
   private function treeLoad(event:ResultEvent):void
   {
    d = event.result as XML;
    t.dataProvider = d;
    //给网格加入数据
    for each(var xml:XML in event.result..data)
    {
     var o:Object = new Object();
     o.id = xml.@id;
     o.name = xml.@name;
     o.value = xml.@value;
     dataGrid.addItem(o);
    }
   }
   
   /*添加树结点操作*/
   private function addNode(event:MouseEvent):void
   {
    if(t.selectedIndex == -1)
    {
     Alert.show("请选择一个父结点", "提示信息");
    }
    else
    {
     var newNode:XML = <node/>;
     newNode.@value = nodeText.text;
     
     var node:XML = XML(t.selectedItem);
     if(node.@isBranch == true)
     {
      node.parent().appendChild(newNode);
     }
     else
     {
      node.appendChild(newNode); 
     }
     nodeText.text = "";
     Alert.show("添加结点成功！",　"提示信息");
    }
   }
   
   /*删除树的结点操作*/
   private function delNode(event:MouseEvent):void
   {
    if(t.selectedIndex == -1)
    {
     Alert.show("请选择一个需要删除的结点", "提示信息");
    }
    else
    {
     Alert.show("你确定要删除该结点吗？", "提示信息", 1|2, this, delHandler);
    }
     
   }
   
   /*删除树结点确认操作*/
   private function delHandler(event:CloseEvent):void
   {
    if(event.detail == Alert.YES)
    {
     var node:XML = XML(t.selectedItem);
     var nodeList:XMLList = XMLList(node.parent()).children();
     for(var i:int = 0; i < nodeList.length(); i++)
     {
      if(nodeList[i].@value == node.@value && (nodeList[i].@isBranch = true))
      {
       delete nodeList[i];
      }
      
     }
     Alert.show("删除结点成功！", "提示信息");
    }
   }
   
   /*将ArrayCollection转换成XML*/
   private function arrToXML(event:MouseEvent):void
   {
    var root:XML = <root/>;
    for(var i:int = 0; i < dataGrid.length; i++)
    {
     var node:XML = new XML(<node/>);
     node.id = dataGrid[i].id;
     node.name = dataGrid[i].name;
     node.value = dataGrid[i].value;
     root.appendChild(node);
    }
    Alert.show(root.toXMLString());
   }
   
   /*将XML转换成ArrayCollection*/
   private function XMLToArr(event:MouseEvent):void
   {
    dataGrid.removeAll();
    hs.send();
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
  <s:HTTPService id="hs" url="data/treeData.xml" resultFormat="e4x" result="treeLoad(event)"/>
 </fx:Declarations>
 <mx:DataGrid height="186" id="dg" dataProvider="{dataGrid}">
  <mx:columns>
   <mx:DataGridColumn headerText="编号" dataField="id"/>
   <mx:DataGridColumn headerText="名称" dataField="name"/>
   <mx:DataGridColumn headerText="值" dataField="value"/>
  </mx:columns>
 </mx:DataGrid>
 
 <mx:Tree id="t" width="322" height="224" labelField="@value"></mx:Tree>
 <s:HGroup width="530" height="57">
  <s:TextInput id="nodeText"/>
  <s:Button label="增加" click="addNode(event)" enabled="{nodeText.text.replace(/^\s*|\s*$/g,'').split(' ').join('')==''?false:true}"/>
  <s:Button label="删除" click="delNode(event)" enabled="{t.selectedIndex==-1?false:true}"/>
  <s:Button label="将XML转换成AC" click="XMLToArr(event);"/>
  <s:Button label="将AC转换成XML" click="arrToXML(event);"/>
   
 </s:HGroup>
</s:Application>

运行效果图：