FLEX3 樹形圖結構

用FLEX3從數據庫接受數據形成樹形圖步驟:

1.封裝一個名爲Node的as類,包括編號,名稱,子節點和一個構造方法。

package common{
    import mx.collections.ArrayCollection;
        public class Node{
               public var id:int;
               public var name:String;
               public var children:ArrayCollection;
              

               public function Node(){
        }
    }
}

2.運用Node.as完成樹形圖(假設兩層數)。

            private var trees:ArrayCollection;  //第一層樹結點數據
            private var nodesChildren:ArrayCollection; //孩子結點集合
            private var node:Node = new Node();   //樹結點

private function getTree():void{
                trees = new  ArrayCollection();
                var i:int = 0;
                var j:int = 0;
                var channel:Object ;//所有欄目
                var firstChannel:Object ;//一級欄目
                var secondChannel:Object ;//二級欄目
                for(i;i<_channelList.length;i++){
                    channel = _channelList.getItemAt(i);
                    if(channel.PARENT_ID==0){
                        firstChannel = channel;
                        nodesChildren = new ArrayCollection();
                        for(j=0;j<_channelList.length;j++){
                            channel = _channelList.getItemAt(j);
                            if(channel.PARENT_ID==firstChannel.ID){
                                secondChannel = channel;
                                node = new Node();
                                node.id=secondChannel.ID;  
                                node.name=secondChannel.CHANNEL_NAME;
                                node.children=null;
                                nodesChildren.addItem(node);
                            }
                        }
                        node = new Node();
                        node.id=firstChannel.ID;  
                        node.name=firstChannel.CHANNEL_NAME;
                        node.children=nodesChildren;
                        trees.addItem(node);
                    }
                }
                tree.dataProvider=trees;   
                tree.labelField="name"; //指定顯示字段
            }


            /**********獲得欄目-回調方法**********/
            private function getChannelListHttp_Handler(evt:JsonResponseEvent):void{
                 _channelList = new ArrayCollection(evt.JsonObj.data as  Array);
                 getTree();
            }
            
            /**********點擊樹形欄目方法 *******/
            private function tree_itemClick(evt:ListEvent):void {
                var item:Object = evt.currentTarget.selectedItem;
                var searchKeys:Array = new Array();
                var searchValues:Array = new Array();
                searchKeys.push("CHANNEL_ID");
                searchValues.push(item.id);                
                paginator.param.isSearch=true;
                paginator.param.searchKeys=searchKeys;
                paginator.param.searchValues=searchValues;
                paginator.commHttp.send(paginator.param);                              
                channelId=item.id;
               }

<mx:HBox width="150" height="100%">
            <mx:Tree id="tree" width="100%" height="100%" itemClick="tree_itemClick(event)" ></mx:Tree>
        </mx:HBox>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章