当前位置：首页 > news >正文

flex tree中坑爹的尝试

news 2025/9/17 20:28:49

1、在开发中我遇到一种需求，就是我点击树的折叠图标一下向下打开，当我单击该树的最后一个节点（点击的是节点，不是展开图片），联动的打开另一颗树，发现

树中selectitems和getparentitem是无法选中该树中为展示出来的节点，因为该方式只适合人机操作的时候使用，后期发现只能用代码的方式，在每个节点中添加父节点的属性，利用代码的方式打开

<?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">
   <fx:Script>
       <![CDATA[
           import mx.collections.ArrayCollection;
           import mx.events.ListEvent;

           private var _templateItem : Object = null;
           private var _flag : Boolean = false;

           [Bindable]
           private var node : ArrayCollection = new ArrayCollection([
               {name: '张',age:12,misid:'11',id:'01',children:[
                   {name : "张三",age : 12 ,misid:'123',id:'1',parent:'01',children:
                       [
                           {name : "张三1",age : 12,id:'11',misid:null,parent:'1' },
                           {name : "张三2",age : 12,id:'12',misid:'121321',parent:'1' },
                           {name : "张三3",age : 12,id:'13',misid:null,parent:'1' }
                       ]
                   },
                   {name : "张四",age : 12 ,misid:'123',id:'2',parent:'01',children:
                       [
                           {name : "张四a",age : 12 ,id:'21',misid:'121321',parent:'2' },
                           {name : "张四d",age : 12 ,id:'22',misid:null,parent:'2'},
                           {name : "张四f",age : 12 ,id:'23',misid:null,parent:'2'},
                           {name : "张四g",age : 12 ,id:'24',misid:'121321',parent:'2'}
                       ]
                   }
               ]}
           ]);
           [Bindable]
           private var node1 : ArrayCollection = new ArrayCollection([
               {name: '李',age:12,misid:'11',gisId:'01',children:[
                   {name : "李三",age : 12 ,misid:'123',gisId:'1',children:
                       [
                           {name : "李三1",age : 12,gisId:'11',misid:null },
                           {name : "李三2",age : 12,gisId:'12',misid:'121321' },
                           {name : "李三3",age : 12,gisId:'13',misid:null }
                       ]
                   },
                   {name : "李四",age : 12 ,misid:'123',gisId:'2',children:
                       [
                           {name : "李四a",age : 12,gisId:'21',misid:'121321' },
                           {name : "李四d",age : 12,gisId:'22' ,misid:null},
                           {name : "李四f",age : 12,gisId:'23' ,misid:null},
                           {name : "李四g",age : 12,gisId:'24',misid:'121321'}
                       ]
                   }
                   ]
               }
           ]);

           /**
           * gisTree点击事件
           */
           private function tree_itemClick( event:Event):void
           {
               var obj :Object = gisTree.selectedItem;
               gisTree.expandItem(obj,true);
               var gisId:String = obj.id;
               var misRootNode:Object = (misTree.dataProvider as ArrayCollection).getItemAt(0);
               if(misRootNode.gisId==gisId)
               {
                   misTree.expandItem(misRootNode,true);
               }
               else
               {
                   if(misRootNode.children!=null)
                   {
                       openMisTree(misRootNode.children,gisId);
                   }
               }
           }
           /**
           * 根据gis节点打开mis节点(从上级到下级打开)
           */
           private function openMisTree(misNode:Object,gisId:String):void
           {
               for each(var node:Object in misNode)
               {
                   if(node.gisId==gisId)
                   {
                       misTree.expandItem(node,true);
                   }
                   else
                   {
                       openMisTree(node.children,gisId);
                   }
               }
           }

           /**
           * misTree点击事件
           */
           protected function misTreeItemClickHandler(event:ListEvent):void
           {
               var gisId :String = '2';//目的打开张四
               var gisTreeRootNode : Object = (gisTree.dataProvider as ArrayCollection).getItemAt(0);
               if(gisTreeRootNode.id==gisId)
               {
                   misTree.expandItem(gisTreeRootNode,true);
               }
               else
               {
                   if(gisTreeRootNode.children!=null&&gisTreeRootNode.children.length>0)
                   {
                       openGisTreeItem(gisTreeRootNode.children,gisId);
                   }
               }
           }
           private function openGisTreeItem(children:Object,gisId:String):void
           {
               for each(var node:Object in children)
               {
                   if(node.id==gisId)
                   {
                       var parents:Array=new Array();
                       parents.push(node);
                       getGisTreeParent(parents,node.parent);
                       gisTree.openItems=parents;
//                       gisTree.selectedItem = node;
//                       gisTree.expandItem(gisTree.getParentItem(node),true);
//                       gisTree.expandItem(node,true);
                   }
                   else
                   {
                       openGisTreeItem(node.children,gisId);
                   }
               }
           }

           private function getGisTreeParent(listParentNode:Array,parentId:String):void
           {
               for each(var nodeItem:Object in node)
               {
                   if(nodeItem.id==parentId)
                   {
                       listParentNode.push(nodeItem);
                       getGisTreeParent(listParentNode,nodeItem.parent);
                   }

               }
           }

       ]]>
   </fx:Script>
   <fx:Declarations>
       
   </fx:Declarations>
   <mx:HBox width="100%" height="100%" horizontalAlign="center">
       <mx:Tree id="gisTree"
               labelField="name"
               dataProvider="{node}"
               width="200" itemClick="tree_itemClick(event)"/>

       <mx:Tree id="misTree"
               labelField="name"
               dataProvider="{node1}"
               width="200" itemClick="misTreeItemClickHandler(event)"/>

   </mx:HBox>
</s:Application>