{"id":174,"date":"2020-02-03T22:56:47","date_gmt":"2020-02-03T14:56:47","guid":{"rendered":"https:\/\/blog.indeex.club\/?p=174"},"modified":"2020-06-20T23:24:57","modified_gmt":"2020-06-20T15:24:57","slug":"tree","status":"publish","type":"post","link":"https:\/\/blog.indeex.club\/index.php\/2020\/02\/03\/tree\/","title":{"rendered":"Tree"},"content":{"rendered":"<hr \/>\n<p>\u7531\u4e8eXML\u7684\u64cd\u4f5c\u548cCSS\u6837\u5f0f\u7684\u6e32\u67d3\u5f88\u8017\u6027\u80fd\uff0c\u672a\u6765\u4f1a\u9010\u6b65\u88ab\u66ff\u4ee3\uff0c\u8fd9\u91cc\u5199\u4e00\u4e2a\u5e9f\u5f03XML\u7ed3\u6784\u7684\u9ad8\u6548Tree\u63a7\u4ef6\u793a\u4f8b\uff0c\u4f9b\u672a\u6765\u4f7f\u7528\u3002<\/p>\n<p>\u6837\u4f8b\u4ec5\u4f9b\u53c2\u8003\uff0c\u7981\u6b62\u7528\u4e8e\u9879\u76ee\u3002<\/p>\n<p><img src=\"https:\/\/hungking.cc\/assets\/imgs\/indeex.cc\/tree1.jpg\" alt=\"Tree\" \/><\/p>\n<pre><code class=\"language-javascript line-numbers\">package tree {\n    import display.Sprite;\n    import events.MouseEvent;\n\n    public class TreeNode extends Sprite {\n        protected var bg:Sprite;\n        protected var nodeContainer:Sprite;\n        protected var isOpen:Boolean = true;\n        protected var isHide:Boolean;\n        protected var _c:Sprite;\n        public var isSelected:Boolean = false;\n        public var nodeArr:Array;\n        public var _w:int;\n        public var _h:int;\n        public var _space:int;\n        public var pNode:TreeNode;\n        public var value:Object;\n\n        public function TreeNode(container:Sprite, data:Object = null, width:int = 150, height:int = 20, space:int = 0, _isHide:Boolean = false) {\n            super();\n            _c = container ? container : this;\n            _w = width;\n            _h = height;\n            _space = space;\n            isHide = _isHide;\n            init();\n            if (!isHide) {\n                setValue(data);\n            }\n        }\n\n        private function clickHandler(e:MouseEvent):void {\n            if (nodeArr.length &gt; 0) {\n                isOpen ? closeList() : openList();\n            } else {\n                _c.dispatchEvent(new TreeEvent(TreeEvent.SELECTED, this));\n            }\n        }\n\n        private function overHandler(e:MouseEvent):void {\n            if (isSelected) {\n                return;\n            }\n            draw(true);\n        }\n\n        private function outHandler(e:MouseEvent):void {\n            if (isSelected) {\n                return;\n            }\n            draw(false);\n        }\n\n        private function selectedHandler(e:TreeEvent):void {\n            if (nodeArr.length &gt; 0) {\n                return;\n            }\n            unSelected();\n            e.node.selected();\n        }\n\n        private function changeHandler(e:TreeEvent):void {\n            update();\n        }\n\n        private function unSelected():void {\n            isSelected = false;\n            draw();\n        }\n\n        public function getNodeByIndex(index:int):TreeNode {\n            if (index &lt; 0 || index &gt;= nodeArr.length) {\n                return null;\n            }\n            return nodeArr[index];\n        }\n\n        public function addNode(node:TreeNode):void {\n            if (nodeArr.length &gt; 0) {\n                node.y = nodeArr[nodeArr.length - 1].y + node._h + _space;\n            } else {\n                node.y = 0;\n            }\n            node.pNode = this;\n            nodeContainer.addChild(node);\n            nodeArr.push(node);\n            _c.dispatchEvent(new TreeEvent(TreeEvent.CHANGE));\n            if (nodeArr.length == 1) {\n                draw();\n                bg.buttonMode = true;\n            }\n        }\n\n        public function removeNode(node:TreeNode):void {\n            var index:int = nodeArr.indexOf(node);\n            if (index != -1) {\n                var tempNode:TreeNode = nodeArr.splice(index, 1)[0];\n                nodeContainer.removeChild(tempNode);\n                tempNode.clear();\n                _c.dispatchEvent(new TreeEvent(TreeEvent.CHANGE));\n                if (nodeArr.length == 0) {\n                    bg.buttonMode = false;\n                    draw();\n                }\n            }\n        }\n\n        public function update():void {\n            clean();\n            var currentNode:TreeNode;\n            var prevNode:TreeNode;\n            for (var i:int = 0; i &lt; nodeArr.length; i++) {\n                currentNode = nodeArr[i];\n                currentNode.x = 0;\n                currentNode.update();\n                if (i == 0) {\n                    currentNode.y = 0;\n                } else {\n                    prevNode = nodeArr[i - 1];\n                    currentNode.y = prevNode.y + prevNode.height + _space;\n                }\n                nodeContainer.addChild(currentNode);\n            }\n        }\n\n        public function clean():void {\n            for each (var node:TreeNode in nodeArr) {\n                if (node.stage) {\n                    nodeContainer.removeChild(node);\n                }\n            }\n        }\n\n        public function clear():void {\n            bg.removeEventListener(MouseEvent.MOUSE_OVER, overHandler);\n            bg.removeEventListener(MouseEvent.MOUSE_OUT, outHandler);\n            bg.removeEventListener(MouseEvent.CLICK, clickHandler);\n            _c.removeEventListener(TreeEvent.CHANGE, changeHandler);\n            _c.removeEventListener(TreeEvent.SELECTED, selectedHandler);\n        }\n\n        public function openList():void {\n            isOpen = true;\n            addChild(nodeContainer);\n            _c.dispatchEvent(new TreeEvent(TreeEvent.CHANGE));\n        }\n\n        public function closeList():void {\n            isOpen = false;\n            removeChild(nodeContainer);\n            _c.dispatchEvent(new TreeEvent(TreeEvent.CHANGE));\n        }\n\n        protected function init():void {\n            nodeArr = new Array();\n\n            bg = new Sprite();\n            addChild(bg);\n            draw();\n\n            nodeContainer = new Sprite();\n            nodeContainer.y = _h;\n            addChild(nodeContainer);\n\n            if (isHide) {\n                bg.visible = false;\n                nodeContainer.y = 0;\n            }\n\n            bg.addEventListener(MouseEvent.MOUSE_OVER, overHandler);\n            bg.addEventListener(MouseEvent.MOUSE_OUT, outHandler);\n            bg.addEventListener(MouseEvent.CLICK, clickHandler);\n            _c.addEventListener(TreeEvent.CHANGE, changeHandler);\n            _c.addEventListener(TreeEvent.SELECTED, selectedHandler);\n        }\n\n        protected function draw(f:Boolean = false):void {\n\n        }\n\n        public function selected():void {\n            isSelected = true;\n        }\n\n        public function setValue(o:Object):void {\n            value = o;\n        }\n    }\n}\n<\/code><\/pre>\n<p>\u4ee3\u7801\u6d45\u663e\u6613\u61c2\uff0c\u65e0\u9700\u89e3\u91ca\u3002<\/p>\n<p>\u5e0c\u671b\u5f88\u5feb\u7531WEBGL\u66ff\u4ee3XML\/HTML\/XHTML\/MXML\u8fd9\u79cdTag\u3002<\/p>\n<p>code enjoy! \ud83d\ude04\ud83d\ude04\ud83d\ude01<\/p>\n<p>\u4f5c\u8005\uff1aindeex<\/p>\n<p>\u94fe\u63a5\uff1a<a class=\"wp-editor-md-post-content-link\" href=\"https:\/\/indeex.cc\/\">https:\/\/indeex.cc<\/a><\/p>\n<p>\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n<hr \/>\n","protected":false},"excerpt":{"rendered":"<p>\u7531\u4e8eXML\u7684\u64cd\u4f5c\u548cCSS\u6837\u5f0f\u7684\u6e32\u67d3\u5f88\u8017\u6027\u80fd\uff0c\u672a\u6765\u4f1a\u9010\u6b65\u88ab\u66ff\u4ee3\uff0c\u8fd9\u91cc\u5199\u4e00\u4e2a\u5e9f\u5f03XML\u7ed3\u6784\u7684\u9ad8\u6548Tree<a href=\"https:\/\/blog.indeex.club\/index.php\/2020\/02\/03\/tree\/\" class=\"read-more\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/174"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":181,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/174\/revisions\/181"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}