7.12.創建一個帶復選框的Tree控件

2024-04-27 13:52:01

字體：大中小

來源：轉載

供稿：網友

7.12.1.問題
你要創建一個樹。它的結點一個有三個狀態的CheckBox。
7.12.2.解決辦法
我們從三個方面去解決這個問題：
1 創建TreeItemRenderer。這個renderer 要包含CheckBox；
2 當CheckBox 是第三種狀態時，將有一個黑色的小圖片覆蓋在CheckBox 上方，
也就是說，這時我們看到CheckBox 的，不是空心的，也不是里邊含有“勾”，而是里邊含有一個實心的黑方塊；
3 dataProvider 的item 中要有一個屬性用于表示CheckBox 的選中狀態；
7.12.3.討論
通常我們用tree 來表現一個文件系統，而且我們經常需要同時選中多個文件，并對它們一起做某個操作，如刪除，復制等。所以我們需要tree 的結點能有一種狀態，表示它己經表選中了。

一個父結點的選中或取消選中操作應該同時觸發它的所有子結點同時被選中或同時取消選中。如果這些子結點，有些是選中狀態，有些是未選中狀態，這時父結點需要有第三種狀態才能更好的表現這種情況，所以我們需要有至少兩個狀態的CheckBox。這第三種狀態表示：某個父結點的子結點有些選中，有些未選中，而它自己是選中。

我們的解決辦法是自定義一個TreeItemRenderer，(就是下邊的CheckTreeRenderer) 它繼承自TreeItemRenderer，我們使用它實現三種狀態的CheckBox。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();" >
<mx:Script>
<![CDATA[
import mx.collections.*;
[Bindable]
public var folderList:XMLList = <> 
<folder state="unchecked" label="Marketing Collateral" isBranch="true">
<folder state="unchecked" isBranch="true" label="Media, PR, and Communications">
<folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers"/>
<folder state="unchecked" isBranch="false" label="Articles Reprints"/>
<folder state="unchecked" isBranch="false" label="Interviews and Transcripts"/>
<folder state="unchecked" isBranch="false" label="Press Kits"/>
<folder state="unchecked" isBranch="false" label="Press Releases"/>
<folder state="unchecked" isBranch="false" label="Quick Hits"/>
<folder state="unchecked" isBranch="false" label="Rep Talking Points"/>
<folder state="unchecked" isBranch="false" label="Special Updates"/>
<folder state="unchecked" isBranch="false" label="White Papers"/>
</folder>
<folder state="unchecked" isBranch="true" label="Forms and Applications">
<folder state="unchecked" isBranch="false" label="Applications" />
<folder state="unchecked" isBranch="false" label="Forms" />
</folder>
</folder>
</>;
[Bindable]
public var folderCollection:XMLListCollection;
private function init() : void {
folderCollection = new XMLListCollection(folderList);
checkTree.dataProvider = folderCollection;
}

]]>
</mx:Script>
<mx:Tree id="checkTree" itemRenderer="oreilly.cookbook.CheckTreeRenderer" labelField="@label" width="100%" height="100%" >
</mx:Tree>
</mx:Application>