您的位置:首页 > 其它

flex tree中坑爹的尝试

2016-06-17 08:46 393 查看
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):vo
aebf
id

            {

                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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  flex