Flex中带有三种状态CheckBox的Tree的实现

常常会用到带有3种状态CheckBox的树形组件，比如在权限管理中，或者是地区选择中等等，如下图：


不多说费话了，直接进入主题，看看如何实现。其实在Flex中，只用自己实现一个TreeItemRenderer就可以了，代码如下：

package com.robin {
    import flash.events.Event;
    import flash.geom.Rectangle;
    
    import mx.controls.CheckBox;
    import mx.controls.treeClasses.TreeItemRenderer;
    import mx.controls.treeClasses.TreeListData;
    import mx.events.FlexEvent;

    public class ThreeStatusCheckBoxTreeItemRenderer extends TreeItemRenderer {
        private static var _colorForThirdState:int = 0x37BEF8;
        private static var _selectedField:String = "selected";
        
        private var checkBox:CheckBox;

        public function ThreeStatusCheckBoxTreeItemRenderer() {
            super();
        }

        override protected function createChildren():void {
            super.createChildren();
            checkBox = new CheckBox();
            addChild(checkBox);
            checkBox.addEventListener(Event.CHANGE, changeHandler);
        }

        /**//**
         * Initial data when component initialization
         *
         */
        override protected function commitProperties():void {
            super.commitProperties();
            if (data && data.@[_selectedField] != null) {
                var s:int = int(data.@[_selectedField]);
                var selected:Boolean = s > 0 ? true : false;
                checkBox.selected = selected;
            } else {
                checkBox.selected = false;
            }
        }

        /**//**
         * update dataProvider when user click CheckBox
         *
         */
        protected function changeHandler(event:Event):void {
            if (data && data.@[_selectedField] != null) {
                data.@[_selectedField] = checkBox.selected ? "1" : "0";
            }
            
            var listData:TreeListData = TreeListData(listData);
            if (listData.hasChildren) {
                var item:XML = XML(listData.item);
                handleAllChildren(item.children());
            }
            handleAllParents(listData.item.parent());
        }

        private function handleAllChildren(children:XMLList):void {
            for each (var item:XML in children) {
                item.@[_selectedField] = checkBox.selected ? "1" : "0";
                var children:XMLList = item.children();
                if (children.length() > 0) {
                    handleAllChildren(children);
                }
            }
        }

        private function handleAllParents(parent:XML):void {
            if (parent != null) {
                var children:XMLList = parent.children();
                var hasSelected1:Boolean = false;
                var hasSelected2:Boolean = false;
                var hasSelected0:Boolean = false;
                for each (var item:XML in children) {
                    if (int(item.@[_selectedField]) == 1) {
                        hasSelected1 = true;
                    }
                    if (int(item.@[_selectedField]) == 2) {
                        hasSelected2 = true;
                    }
                    if (int(item.@[_selectedField]) == 0) {
                        hasSelected0 = true;
                    }
                }
                if (checkBox.selected == true) {
                    if (!hasSelected0 && !hasSelected2) {
                        parent.@[_selectedField] = "1";
                    } else {
                        parent.@[_selectedField] = "2";
                    }
                } else {
                    if (!hasSelected1 && !hasSelected2) {
                        parent.@[_selectedField] = "0";
                    } else {
                        parent.@[_selectedField] = "2";
                    }
                }
                handleAllParents(parent.parent());
            }
        }

        /**//**
         * reset itemRenderer's width
         */
        override protected function measure():void {
            super.measure();
            measuredWidth += checkBox.getExplicitOrMeasuredWidth();
        }

        /**//**
         * re-assign layout for tree, move lable to right
         * @param unscaledWidth
         * @param unscaledHeight
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            var startx:Number = data ? TreeListData(listData).indent : 0;

            if (disclosureIcon) {
                disclosureIcon.x = startx;
                startx = disclosureIcon.x + disclosureIcon.width;
                disclosureIcon.setActualSize(disclosureIcon.width, disclosureIcon.height);
                disclosureIcon.visible = data ? TreeListData(listData).hasChildren : false;
            }
            if (icon) {
                icon.x = startx;
                startx = icon.x + icon.measuredWidth;
                icon.setActualSize(icon.measuredWidth, icon.measuredHeight);
            }
            checkBox.move(startx, (unscaledHeight - checkBox.height) / 2);
            label.x = startx + checkBox.getExplicitOrMeasuredWidth();

            var node:XML = data as XML;
            if (int(node.@[_selectedField]) == 2) {
                fillCheckBox(true);
            } else {
                fillCheckBox(false);
            }

        }
        
        /**//**
         * re-draw check box for the third state
         * @param isFill
         */
        private function fillCheckBox(isFill:Boolean):void {
            checkBox.validateNow();
            checkBox.graphics.clear();
            if (isFill) {
                var myRect:Rectangle = checkBox.getBounds(checkBox);
                checkBox.graphics.beginFill(_colorForThirdState, 1);
                checkBox.graphics.drawRoundRect(myRect.x, myRect.y, myRect.width, myRect.height, 1, 0x00FF00);
                checkBox.graphics.endFill();
            }
        }


    }
}

然后在tree组件中使用这个renderer就可以了。

<?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" xmlns:robin="com.robin.*">
    <fx:Declarations>
        <fx:XMLList id="treeData">
            <node name = "ShangHai" type="ROOT" selected ="1">
                <node name = "HuangPu" type="NODE" selected = "1">
                    <node name = "A" type="NODE" selected = "1" />
                    <node name = "B" type="NODE" selected = "1" />
                </node>
                <node name = "PuDong" type="NODE" selected = "1"/>
            </node>
            <node name = "Beijing" type="ROOT" selected = "2">
                <node name = "HaiDian" type="NODE" selected = "0"/>
                <node name = "ChaoYang" type="NODE" selected = "1"/>
            </node>
        </fx:XMLList>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            protected function getCurrentData_clickHandler(event:MouseEvent):void {
                currentText.text = String(treeData);
            }
        ]]>
    </fx:Script>
    
    <mx:Tree x = "0" y = "0" width = "232" height = "285" itemRenderer = "com.robin.ThreeStatusCheckBoxTreeItemRenderer" labelField = "@name" dataProvider = "{treeData}"/>
    <s:Button x = "43" y = "293" label = "Get Current Data" id = "getCurrentData" click = "getCurrentData_clickHandler(event)"/>
    <s:TextArea x = "253" y = "0" width = "459" height = "285" id = "currentText"/>
</s:Application>