Flex tree and three-state checkbox

There are examples of other people's implementations on the Internet, but the style is not easy to change, there is also the failure to initialize the selected, there is also a three-state effect that the semi-selected status is not clear, so I made one based on itemrender and made a combination.

Select All effects and semi-select statuses. images used for the checkbox flex3 Style

Treecheckboxitemrender. mxml

<? XML version = "1.0" encoding = "UTF-8"?> <S: mxtreeitemrenderer xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/mx" initialize = "events (Event) "> <FX: Metadata> [event (name =" checkboxclick ", type =" customevent ")] </FX: Metadata> <FX: style> @ namespace s" Library: // ns.adobe.com/flex/spark "; @ namespace MX" Library: // ns.adobe.com/flex/mx ";. halfselected {Upicon: embed(source%'1.png '); overicon: embed(source%'1.png'); downicon: embed(source%'1.png '); disabledicon: embed(source%'1.png ');}. selected {upicon: embed(source%'4.png '); overicon: embed(source%'4.png'); downicon: embed(source%'4.png '); disabledicon: embed(source%'4.png ');}. unselected {upicon: embed(source%'2.png '); overicon: embed(source%'3.png'); downicon: embed(source%'3.png '); disabledicon: embed(source%'2.png ') ;}</FX: style> <FX: SCRIPT> <! [CDATA [import MX. controls. tree; import MX. events. flexevent; [Bindable] [embed (Source = "1.png")] public Static Var harfselect_class: Class; [Bindable] [embed (Source =" 2.png")] public Static Var unselect_class: class; [Bindable] [embed (Source = "3.png")] public Static Var unselect_over_class: Class; [Bindable] [embed (Source =" 4.png")] public Static Var select_class: class; override protected function commitproperties (): voi D {super. commitproperties (); If (Data! = NULL & [email protected]! = "") {If (data. children (). length () = 0) {If ([email protected] = "true") {checkbox. selected = true;} else {checkbox. selected = false;} return;} recursion (data);} else {checkbox. selected = false ;}} private function recursion (dataitem: Object): void {// traverses all subnodes. If there are subnodes under the subnode, recursive for (var I: int = 0; I <dataitem. children (). length (); I ++) {var child: xml = dataitem. children () [I]; If (child. children (). length ()> 0) {recursi On (child) ;}}// query the selected subnode var selectedchild: xmllist = dataitem .. node. (@ pid = [email protected] & @ selected = "true"); var selectelement: xmllist = dataitem .. node. (@ selected = "true"); // if the number of subnodes of the node is equal to the number of subnodes selected under the node, select if (dataitem. children (). length () = selectedchild. length () {checkbox. selected = true; [email protected] = "true"; fillcheckbox (false);} else {checkbox. selected = false; fillcheckbox (false ); If (selectelement. Length ()> 0) {fillcheckbox (true) ;}} protected function checkbox_changehandler (Event: Event): void {If ([email protected]! = "") {Togglechildrens (data); toggleparents (data, tree (this. owner) ;}} private function togglechildrens (item: Object): void {[email protected] = checkbox. selected; For (var I: Int = 0; I <item. children (). length (); I ++) {item. children () [I] [email protected] = checkbox. selected; togglechildrens (item. children () [I]) ;}}/*** // todo: recursively set the state of the Parent Project * @ Param item project * @ Param tree object * @ Param state target State */private Fu Nction toggleparents (item: object, tree: tree): void {If (item = NULL) return; else {var parentitem: Object = tree. getparentitem (item); If (parentitem! = NULL) {If ([email protected] = "false") {[email protected] = "false" ;}else {var flag: Int = 0; for (var I: Int = 0; I <parentitem. children (). length (); I ++) {If (parentitem. children () [I] [email protected] = "true") {flag ++ ;}} if (flag = parentitem. children (). length () {[email protected] = "true" ;}} toggleparents (parentitem, tree) ;}} protected function fillcheckbox (isfill: Boolean): void {checkbox. graphics. clear (); If (isfill) {var myrect: rectangle = checkbox. getbounds (checkbox); checkbox. graphics. beginfill (0xff0000, 1) checkbox. graphics. drawroundrect (myrect. X + 3, myrect. Y + 3, checkbox. width/2, checkbox. height/2, 1, 1); checkbox. graphics. endfill (); checkbox. stylename = "halfselected";} else {If (checkbox. selected) {checkbox. stylename = "selected";} else {checkbox. stylename = "unselected" ;}} protected function mxtreeitemrendererincluinitializehandler (Event: flexevent): void {// todo auto-generated method stub // tree (this. owner)} protected function checkbox_clickhandler (Event: mouseevent): void {// todo auto-generated method stubtree (this. owner ). dispatchevent (New customevent (customevent. checkbox_click, {"selected": checkbox. selected});}]> </FX: SCRIPT> <s: States> <s: State name = "normal"/> <s: state name = "hovered"/> <s: State name = "selected"/> </S: States> <s: hgroup left = "0" Right = "0" Top = "0" Bottom = "0" verticalalign = "Middle"> <s: rect id = "indentationspacer" width = "{treelistdata. indent} "percentheight =" 100 "alpha =" 0 "> <s: Fill> <s: solidcolor color =" 0 xffffff "/> </s: fill> </S: rect> <s: Group ID = "disclosuregroup"> <s: bitmapimage source = "{treelistdata. disclosureicon} "visible =" {treelistdata. haschildren} "/> </S: group> <mx: checkbox id =" checkbox "change =" checkbox_changehandler (event) "Click =" checkbox_clickhandler (Event) "stylename =" unselected "selecteddownicon =" {select_class} "selectedupicon =" {select_class} "selectedow.con =" {select_class} "/> <s: bitmapimage source =" {treelistdata. icon} "/> <s: richeditabletext id =" labelfield "editable =" false "text =" {treelistdata. label} "paddingtop =" 2 "/> </S: hgroup> </S: mxtreeitemrenderer>

Main File

<? 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: components =" com. pricklythistle. common. components. * "> <FX: declarations> <! -- Place non-visual elements (such as services and value objects) Here --> <FX: XML xmlns = "" id = "xmldata"> <node id = "0" pid = "-1" label = "Xiamen" openedid = "-1" type = "-1 "cid =" 0 "selected =" false "isbranch =" true "> <node id =" 110 "pid =" 0 "selected =" false "cid =" 0 "isbranch = "true" type = "2" updatestatus = "1" label = "Software Park demo point 2" createtime = "1404267128253" updatetime = "1404267128253" icon = ""> <node ID = "362" pid = "110" selected = "false" cid = "110" label = "wanghai Road (720 p-Variable Bit Rate) "isbr Anch = "false" updatestatus = "1" channelvalue = "1" isoffline = "false" isplaying = "false" channelstatus = "0" xcoordinate = "0.0" ycoordinate = "0.0" overduestatus = "1" createtime = "1404268448260" updatetime = "1404268514558" icon = ""/> <node id = "360" pid = "110" selected = "false" cid = ""110" label = "elevator room (720 p-Variable Bit Rate) "isbranch =" false "updatestatus =" 1 "channelvalue =" 1 "isoffline =" false "isplaying =" false "channelstatus =" 1 "Xco Ordinate = "0.0" ycoordinate = "0.0" overduestatus = "1" createtime = "1404268305648" updatetime = "1404268724984" icon = ""/> <node id = "359" pid = ""110" selected = "false" cid = "110" label = "Office (720 p-Variable Bit Rate) "isbranch =" false "updatestatus =" 1 "channelvalue =" 1 "isoffline =" false "isplaying =" false "channelstatus =" 0 "xcoordinate =" 0.0 "ycoordinate =" 0.0" "overduestatus =" 1 "createtime =" 1404268247553 "updatetime =" 1404268725016" Icon = ""/> <node id = "361" pid = "110" selected = "false" cid = "110" label = "parking lot (720 p-Variable Bit Rate) "isbranch =" false "updatestatus =" 1 "channelvalue =" 1 "isoffline =" false "isplaying =" false "channelstatus =" 0 "xcoordinate =" 0.0 "ycoordinate =" 0.0 ""overduestatus =" 1 "createtime =" 1404268394947 "updatetime =" 1410789105184 "icon =" "/> </node> <node id =" 101 "pid =" 0 "cid = "0" selected = "false" isbranch = "true" type = "2" updatestatus =" 1 "label =" Software Park demonstration site (outdoor) "createtime =" 1404121845986 "updatetime =" 1408623064915 "icon =" "> <node id =" 357 "pid =" 101 "selected =" false "cid =" 101 "label = ""intersection (720 p-balanced) "isbranch =" false "updatestatus =" 1 "channelvalue =" 1 "isoffline =" false "isplaying =" false "channelstatus =" 0 "xcoordinate =" 0.0 "ycoordinate =" 0.0" "overduestatus =" 1 "createtime =" 1404131355779 "updatetime =" 1410773639789 "icon =" "/> <node id =" 356 "pid =" 101 "selected =" false "cid =" 101 "label =" parking lot (720 p-HD) "isbranch =" false "updatestatus =" 1 "channelvalue =" 1 "isoffline =" false "isplaying =" false "channelstatus =" 0 "xcoordinate =" 0.0 "ycoordinate =" 0.0 ""overduestatus =" 1 "createtime =" 1404131355717 "updatetime =" 1410773658118 "icon =" "/> <node id =" 358 "pid =" 101 "selected =" false "CID = "101" label = "Office (720 p-LD) "isbranch =" false "updatestatus =" 1 "channelvalue =" 1 "I Soffline = "false" isplaying = "false" channelstatus = "0" xcoordinate = "0.0" ycoordinate = "0.0" overduestatus = "1" createtime = "1404182528941" updatetime = "1410773894041" icon = ""/> <node id = "355" pid = "101" selected = "false" cid = "101" label = "(720 p-supports cloud platform Control) "isbranch =" false "updatestatus =" 1 "channelvalue =" 1 "isoffline =" false "isplaying =" false "channelstatus =" 0 "xcoordinate =" 0.0 "ycoordinate =" 0.0" "overduestatus = "1" createtime = "1404131355654" updatetime = "1410779974117" icon = ""/> <node id = "354" pid = "101" selected = "false" cid = "101 "label =" wanghai Road (720 p-LD) "isbranch =" false "updatestatus =" 1 "channelvalue =" 1 "isoffline =" false "isplaying =" false "channelstatus =" 0 "xcoordinate =" 0.0 "ycoordinate =" 0.0 ""overduestatus =" 1 "createtime =" 1404131355592 "updatetime =" 1410787537718 "icon =" "/> <node id =" 222 "pid =" 101 "cid =" 0 "selec Ted = "false" isbranch = "true" type = "2" updatestatus = "1" label = "Software Park Phase II demonstration point (outdoors) "createtime =" 1404121845986 "updatetime =" 1408623064915 "icon =" "> <node id =" 200 "pid =" 222 "selected =" false "cid =" 222 "label = ""guanri Road" isbranch = "false" updatestatus = "1" channelvalue = "1" isoffline = "false" isplaying = "false" channelstatus = "0" xcoordinate = "0.0" ycoordinate = "0.0" overduestatus = "1" createtime = "1404131355779" updatetime = "1 410773639789 "icon =" "/> <node id =" 201 "pid =" 222 "selected =" false "cid =" 222 "label =" "isbranch =" false" updatestatus = "1" channelvalue = "1" isoffline = "false" isplaying = "false" channelstatus = "0" xcoordinate = "0.0" ycoordinate = "0.0" overduestatus = "1" createtime = "1404131355779" updatetime = "1410773639789" icon = ""/> <node id = "202" pid = "222" selected = "false" cid = "222" label = ""Landscape Lake" isbranch = "false" updatestatu S = "1" channelvalue = "1" isoffline = "false" isplaying = "false" channelstatus = "0" xcoordinate = "0.0" ycoordinate = "0.0" overduestatus = "1" createtime = "1404131355779" updatetime = "1410773639789" icon = ""/> </node> <node id = "333" pid = "101" cid = "0" selected =" false "isbranch =" true "type =" 2 "updatestatus =" 1 "label =" Software Park Phase I demonstration point (outdoor) "createtime =" 1404121845986 "updatetime =" 1408623064915 "icon =" "> <node id =" 210 "pid =" 333" Selected = "false" cid = "222" label = "Crossroads" isbranch = "false" updatestatus = "1" channelvalue = "1" isoffline = "false" isplaying = "false "channelstatus =" 0 "xcoordinate =" 0.0 "ycoordinate =" 0.0 "overduestatus =" 1 "createtime =" 1404131355779 "updatetime =" 1410773639789 "icon =" "/> </node> </node> </FX: XML> </FX: declarations> <FX: SCRIPT> <! [CDATA []> </FX: SCRIPT> <mx: tree id = "Tree" dataprovider = "{xmldata}" stylename = "treestyle" horizontalcenter = "0" width = "270" Height = "100%" itemrenderer = "treecheckboxitemrender" labelfield = ""@ label"/> </s: application>

Note: The two main attributes in the XML file are PID and selected. PID is the parent ID, and selected indicates whether to select them. If it is true, it is selected during initialization, in itemrender, I use these two attributes to determine the three States.

Flex tree and three-state checkbox