CheckBoxTree

前面写了一篇数据表格全选/取消全选功能的文章，那如何在树里面嵌入checkbox呢？

先看看效果图：

首先，渲染器必须继承TreeItemRenderer.check不仅是两种状态，而是三种状态，分别是选中，没有选中，子树有些选中。

定义一个CheckBox引用，复写createChildren，在其里面创建实例。

protected var myCheckBox:CheckBox; static private var STATE_SCHRODINGER:String = "schrodinger"; static private var STATE_CHECKED:String = "checked"; static private var STATE_UNCHECKED:String = "unchecked"; public function CheckTreeRenderer () { super(); mouseEnabled = false; this.disclosureIcon = null; this.icon = null; this.setStyle("verticalAlign", "middle") } override protected function createChildren():void { super.createChildren(); myCheckBox = new CheckBox; myCheckBox.setStyle( "verticalAlign", "middle" ); myCheckBox.addEventListener( MouseEvent.CLICK, checkBoxToggleHandler ); addChild(myCheckBox); myCheckBox.setStyle("paddingTop", 15); }

 

复写updatePlayList，重新定位：

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); if(super.data){ if (super.icon != null){ myCheckBox.x = super.icon.x; myCheckBox.y = 2; super.icon.x = myCheckBox.x + myCheckBox.width + 17; super.label.x = super.icon.x + super.icon.width + 3; myCheckBox.setStyle("borderColor", 0x666666); } else{ myCheckBox.x = super.label.x; myCheckBox.y = 2; super.label.x = myCheckBox.x + myCheckBox.width + 17; myCheckBox.setStyle("borderColor", 0x666666); } if (data.@state == STATE_SCHRODINGER){ myCheckBox.setStyle("borderColor", 0xFF4545); } else{ myCheckBox.setStyle("borderColor", 0x666666); } } }

复写set data函数：

override public function set data(value:Object):void { super.data = value; var _tree:Tree = Tree(this.parent.parent); setCheckState (myCheckBox, value, value.@state); if(TreeListData(super.listData).item.@isBranch == 'true') { _tree.setStyle("defaultLeafIcon", null); } }

响应点击函数：

private function checkBoxToggleHandler(event:MouseEvent):void { if (data) { var myListData:TreeListData = TreeListData(this.listData); var selectedNode:Object = myListData.item; var tree:Tree = Tree(myListData.owner); var toggle:Boolean = myCheckBox.selected; if (toggle) { toggleChildren(data, tree, STATE_CHECKED); } else { toggleChildren(data, tree, STATE_UNCHECKED); } var parent:Object = tree.getParentItem (data); toggleParents (parent, tree, getState (tree, parent)); } }

将checkbox全选和取消全选

private function toggleParents (item:Object, tree:Tree, state:String):void { if (item == null){ return; } else{ item.@state = state; toggleParents(tree.getParentItem(item), tree, getState (tree, tree.getParentItem(item))); } } private function toggleChildren (item:Object, tree:Tree, state:String):void{ if (item == null){ return; } else{ item.@state = state; var treeData:ITreeDataDescriptor = tree.dataDescriptor; if (treeData.hasChildren(item)){ var children:ICollectionView = treeData.getChildren (item); var cursor:IViewCursor = children.createCursor(); while (!cursor.afterLast){ toggleChildren(cursor.current, tree, state); cursor.moveNext(); } } } } private function getState(tree:Tree, parent:Object):String{ var noChecks:int = 0; var noCats:int = 0; var noUnChecks:int = 0; if (parent != null) { var treeData:ITreeDataDescriptor = tree.dataDescriptor; var cursor:IViewCursor = treeData.getChildren(parent).createCursor(); while (!cursor.afterLast){ if (cursor.current.@state == STATE_CHECKED){ noChecks++; } else if (cursor.current.@state == STATE_UNCHECKED){ noUnChecks++ } else { noCats++; } cursor.moveNext(); } } if ((noChecks > 0 && noUnChecks > 0) || (noCats > 0)) { return STATE_SCHRODINGER; } else if (noChecks > 0) { return STATE_CHECKED; } else { return STATE_UNCHECKED; } }

获取父节点

private function setCheckState (checkBox:CheckBox, value:Object, state:String):void { if (state == STATE_CHECKED) { checkBox.selected = true; } else if (state == STATE_UNCHECKED){ checkBox.selected = false; } else if (state == STATE_SCHRODINGER){ checkBox.selected = false; } }