ijmo是一款使用TypeScript編寫的新一代JavaScript/HTML5控件集。它秉承觸控優先的設計理念，在全球率先支持AngularJS，并提供性能卓越、零依賴的FlexGrid和圖表等多個控件。

我們已經知道在Wijmo 2017V1版本中新增了TreeView控件，那么如何使用這個控件來創建樹呢？

下面小編來告訴大家。

入門

使用TreeView控件就像使用任何Wijmo控件：

1. 包括所需的腳本，可以從我們的CDN的本地副本引用。詳情請參閱 在您的應用程序中引用Wijmo 5。.

2. 在托管該控件的頁面上創建元素。

3. 初始化控件，即宿主元素的id作為參數的控件，然后由可選的初始化對象。

創建樹

要創建樹，通常必須設置三個屬性：

1. itemsSource 定義包含分層數據的數組。數組中的每個項包含有關節點和（可選）子節點數組的信息。

2. displayMemberPath 定義包含要在樹節點中顯示的文本的項目中的屬性的名稱。 默認情況下，此屬性設置為字符串'header'。

3. childItemsPath 定義包含子節點數組的項目中屬性的名稱。 默認情況下，此屬性設置為字符串'items'。

還有用于將節點圖像，復選框和折疊狀態綁定到itemsSource數組的屬性。

默認情況下，當用戶單擊節點上的任意位置時，TreeView控件會展開折疊的節點。 您可以通過將 expandOnClick屬性設置為false來更改此設置，在這種情況下，只有在折疊/展開的字形上的點擊才會影響折疊狀態。

樣式和CSS

您可以使用CSS自定義TreeView的外觀?？梢愿鶕濣c級別使用不同的字體大小，并在一級節點的左側添加垂直條。

導航樹

TreeView控件最簡單和最常見的用法是導航。TreeView的層次結構和自動搜索功能使用戶可以輕松向下鉆取并找到他們感興趣的項目。

手風琴樹

手風琴是多窗格面板，每次只保留一個面板。它們通常用于導航。

您可以使用TreeView控件來實現手風琴折疊。

復選框

將showCheckboxes屬性設置為true，TreeView將向每個節點添加復選框。

當顯示復選框時，TreeView管理其層次結構，以便當復選框被選中或清除時，新值將自動應用于所有子節點，并反映在父節點的狀態。

圖片

使用imageMemberPath 屬性可通過在包含圖像URL的數據項上指定屬性的名稱來將圖像添加到節點。

自定義節點內容

您可以使用formatItem事件自定義TreeView節點的內容。 事件處理程序參數包括表示節點和要呈現的數據項的元素。

TreeView控件不但可以創建以上類型的樹形結構，還支持禁用節點、延遲加載、拖放、編輯節點和RTL支持等功能。

查看演示和代碼

請通過以下方式聯系葡萄城，查看演示和代碼，或免費試用：

微信：GrapeCityDT

郵件：marketing.xa@grapecity.com

官網：wijmo.gcpowertools.com.cn

關于葡萄城控件

葡萄城是一家跨國軟件研發集團，專注控件領域近30年，是全球最大的控件提供商，也是微軟認證的金牌合作伙伴。

形視圖控件（TreeView）一般用于顯示文檔標題、索引入口、磁盤上的文件和目錄，或能被有效地分層顯示的各種信息。Windows的資源管理器左側的文件夾列表，就是TreeView控件的典型應用。

TreeView控件顯示的是一個分層列表，每個列表項為一個Node對象，每個Node對象均由一個標簽和一個可選的圖像組成。

1 添加ActiveX控件到工具箱

Alt+F11(打開VBE）→插入→用戶窗體，在工程中增加一個用戶窗體，同時顯示出“工具箱”→右擊→附加控件：Microsoft TreeView Control 6.0。

2 添加用戶窗體和控件

選中ImageList控件，在“屬性”窗口中單擊“自定義”右側的按鈕，打開“屬性頁”對話框，選中“16*16”選項按鈕。單擊切換到“圖像”選項卡，然后單擊“插入圖片”按鈕增加3個圖像，分別設置各圖像的“關鍵字”為close、open和p，如下圖：

樹形控件對應的工作表“花名冊”的數據為：

3 調用窗體代碼

Sub 測試TreeView控件()

frmTreeView.Show

End Sub

4 窗體代碼

Private Sub UserForm_Initialize()

Dim c As Integer, i As Integer

Dim nodx As Node

c = Worksheets("花名冊").Range("A1").End(xlDown).Row '數據行數

If c >= 65536 Then c = 1

With TreeView1 '設置TreeView控件的屬性

.LineStyle = tvwTreeLines '設置線型

.ImageList = ImageList1 '綁定ImageList控件

.Style = tvwTreelinesPlusMinusPictureText '設置各節點的類型

End With

i = 2

With Worksheets("花名冊")

Do While i <= c '逐行讀出工作表中的數據

str1 = .Cells(i, 1)

Set nodx = TreeView1.Nodes.Add(, , str1, str1, "close", "open")

Set nodx = TreeView1.Nodes.Add(str1, tvwChild, "sex" & i, "性別：" & .Cells(i, 2), "p")

Set nodx = TreeView1.Nodes.Add(str1, tvwChild, "address" & i, "住址：" & .Cells(i, 3), "p")

Set nodx = TreeView1.Nodes.Add(str1, tvwChild, "telephone" & i, "電話：" & .Cells(i, 4), "p")

Set nodx = TreeView1.Nodes.Add(str1, tvwChild, "memo" & i, "備注：" & .Cells(i, 5), "p")

'object.Add([relative], [relationship], [key], text, [image], [selectedimage])

'relative：代表已存在的Node對象的索引號或鍵值，如上面的tvwChild，代表子對象

'key：可省略，是一個唯一的字符串，用于在集合中查找Node對象，如上面的"sex" & i

i = i + 1

Loop

End With

End Sub

Private Sub cmdAdd_Click()

Dim c As Integer, i As Integer, str1 As String, strSex As String

Dim nodx As Node

str1 = Trim(txtName.Value)

If Len(str1) = 0 Then '判斷姓名文字框是否為空

MsgBox "請輸入姓名！"

Exit Sub

End If

c = TreeView1.Nodes.Count '獲取TreeView控件中節點數

For i = 1 To c '判斷是否已有同名節點

If TreeView1.Nodes(i).Text = str1 Then

MsgBox "列表中已經有該姓名，請重新輸入！"

txtName.SetFocus

Exit Sub

End If

Next

Set nodx = TreeView1.Nodes.Add(, , str1, str1, "close", "open") '添加節點

strSex = "男"

If optWoman.Value Then strSex = "女"

Set nodx = TreeView1.Nodes.Add(str1, tvwChild, "sex" & c + 2, "性別：" & strSex, "p")

Set nodx = TreeView1.Nodes.Add(str1, tvwChild, "address" & c + 2, "住址：" & txtAddress.Value, "p")

Set nodx = TreeView1.Nodes.Add(str1, tvwChild, "telephone" & c + 2, "電話：" & txtTelephone.Value, "p")

Set nodx = TreeView1.Nodes.Add(str1, tvwChild, "memo" & c + 2, "備注：" & txtMemo.Value, "p")

End Sub

Private Sub cmdDel_Click()

If TreeView1.SelectedItem.Index <> 1 Then

TreeView1.Nodes.Remove TreeView1.SelectedItem.Index '刪除選定的節點

End If

End Sub

Private Sub cmdExit_Click()

Unload Me

End Sub

Private Sub cmdExpand_Click()

Dim i As Integer

If cmdExpand.Caption = "展開" Then

For i = 1 To TreeView1.Nodes.Count

TreeView1.Nodes(i).Expanded = True '展開所有節點

Next

cmdExpand.Caption = "折疊"

Else

For i = 1 To TreeView1.Nodes.Count

TreeView1.Nodes(i).Expanded = False '折疊所有節點

Next

cmdExpand.Caption = "展開"

End If

End Sub

Private Sub cmdSort_Click()

TreeView1.Sorted = True

End Sub

在上述窗體打開后，即可進行下面的操作：

－End－