前端開(kāi)發(fā)中，使用TreeView控件創(chuàng)建樹(shù)形結(jié)構(gòu)

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

我們已經(jīng)知道在Wijmo 2017V1版本中新增了TreeView控件，那么如何使用這個(gè)控件來(lái)創(chuàng)建樹(shù)呢？

下面小編來(lái)告訴大家。

入門(mén)

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

包括所需的腳本，可以從我們的CDN的本地副本引用。詳情請(qǐng)參閱在您的應(yīng)用程序中引用Wijmo 5。.
在托管該控件的頁(yè)面上創(chuàng)建元素。
初始化控件，即宿主元素的id作為參數(shù)的控件，然后由可選的初始化對(duì)象。

創(chuàng)建樹(shù)

要?jiǎng)?chuàng)建樹(shù)，通常必須設(shè)置三個(gè)屬性：

itemsSource 定義包含分層數(shù)據(jù)的數(shù)組。數(shù)組中的每個(gè)項(xiàng)包含有關(guān)節(jié)點(diǎn)和（可選）子節(jié)點(diǎn)數(shù)組的信息。
displayMemberPath 定義包含要在樹(shù)節(jié)點(diǎn)中顯示的文本的項(xiàng)目中的屬性的名稱。默認(rèn)情況下，此屬性設(shè)置為字符串'header'。
childItemsPath 定義包含子節(jié)點(diǎn)數(shù)組的項(xiàng)目中屬性的名稱。默認(rèn)情況下，此屬性設(shè)置為字符串'items'。

還有用于將節(jié)點(diǎn)圖像，復(fù)選框和折疊狀態(tài)綁定到itemsSource數(shù)組的屬性。

默認(rèn)情況下，當(dāng)用戶單擊節(jié)點(diǎn)上的任意位置時(shí)，TreeView控件會(huì)展開(kāi)折疊的節(jié)點(diǎn)。您可以通過(guò)將 expandOnClick屬性設(shè)置為false來(lái)更改此設(shè)置，在這種情況下，只有在折疊/展開(kāi)的字形上的點(diǎn)擊才會(huì)影響折疊狀態(tài)。

樣式和CSS

您可以使用CSS自定義TreeView的外觀。可以根據(jù)節(jié)點(diǎn)級(jí)別使用不同的字體大小，并在一級(jí)節(jié)點(diǎn)的左側(cè)添加垂直條。

導(dǎo)航樹(shù)

TreeView控件最簡(jiǎn)單和最常見(jiàn)的用法是導(dǎo)航。TreeView的層次結(jié)構(gòu)和自動(dòng)搜索功能使用戶可以輕松向下鉆取并找到他們感興趣的項(xiàng)目。

手風(fēng)琴樹(shù)

手風(fēng)琴是多窗格面板，每次只保留一個(gè)面板。它們通常用于導(dǎo)航。

您可以使用TreeView控件來(lái)實(shí)現(xiàn)手風(fēng)琴折疊。

復(fù)選框

將showCheckboxes屬性設(shè)置為true，TreeView將向每個(gè)節(jié)點(diǎn)添加復(fù)選框。

當(dāng)顯示復(fù)選框時(shí)，TreeView管理其層次結(jié)構(gòu)，以便當(dāng)復(fù)選框被選中或清除時(shí)，新值將自動(dòng)應(yīng)用于所有子節(jié)點(diǎn)，并反映在父節(jié)點(diǎn)的狀態(tài)。

圖片

使用imageMemberPath 屬性可通過(guò)在包含圖像URL的數(shù)據(jù)項(xiàng)上指定屬性的名稱來(lái)將圖像添加到節(jié)點(diǎn)。

自定義節(jié)點(diǎn)內(nèi)容

您可以使用formatItem事件自定義TreeView節(jié)點(diǎn)的內(nèi)容。事件處理程序參數(shù)包括表示節(jié)點(diǎn)和要呈現(xiàn)的數(shù)據(jù)項(xiàng)的元素。

TreeView控件不但可以創(chuàng)建以上類型的樹(shù)形結(jié)構(gòu)，還支持禁用節(jié)點(diǎn)、延遲加載、拖放、編輯節(jié)點(diǎn)和RTL支持等功能。

查看演示和代碼

請(qǐng)通過(guò)以下方式聯(lián)系葡萄城，查看演示和代碼，或免費(fèi)試用：

微信：GrapeCityDT

郵件：marketing.xa@grapecity.com

官網(wǎng)：wijmo.gcpowertools.com.cn

關(guān)于葡萄城控件

葡萄城是一家跨國(guó)軟件研發(fā)集團(tuán)，專注控件領(lǐng)域近30年，是全球最大的控件提供商，也是微軟認(rèn)證的金牌合作伙伴。

要 #include <QTreeWidget> #include <QTreeWidgetItem>

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

TreeView控件顯示的是一個(gè)分層列表，每個(gè)列表項(xiàng)為一個(gè)Node對(duì)象，每個(gè)Node對(duì)象均由一個(gè)標(biāo)簽和一個(gè)可選的圖像組成。

1 添加ActiveX控件到工具箱

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

2 添加用戶窗體和控件

選中ImageList控件，在“屬性”窗口中單擊“自定義”右側(cè)的按鈕，打開(kāi)“屬性頁(yè)”對(duì)話框，選中“16*16”選項(xiàng)按鈕。單擊切換到“圖像”選項(xiàng)卡，然后單擊“插入圖片”按鈕增加3個(gè)圖像，分別設(shè)置各圖像的“關(guān)鍵字”為close、open和p，如下圖：

樹(shù)形控件對(duì)應(yīng)的工作表“花名冊(cè)”的數(shù)據(jù)為：

姓名	性別	住址	電話	備注
張金山	男	紅旗路1號(hào)	20442468
雷慧	女	育才街2號(hào)	25954509
李軍	男	大同路4號(hào)	21590626
任小霞	女	安東路二段141號(hào)	22540552
白松	男	文林北路77號(hào)	22990946
林小萍	女	復(fù)興南路2段52號(hào)	21114252

3 調(diào)用窗體代碼

Sub 測(cè)試TreeView控件()
frmTreeView.Show
End Sub

4 窗體代碼

Private Sub UserForm_Initialize()
Dim c As Integer, i As Integer
Dim nodx As Node
c = Worksheets("花名冊(cè)").Range("A1").End(xlDown).Row '數(shù)據(jù)行數(shù)
If c >= 65536 Then c = 1
With TreeView1 '設(shè)置TreeView控件的屬性
.LineStyle = tvwTreeLines '設(shè)置線型
.ImageList = ImageList1 '綁定ImageList控件
.Style = tvwTreelinesPlusMinusPictureText '設(shè)置各節(jié)點(diǎn)的類型
End With
i = 2
With Worksheets("花名冊(cè)")
Do While i <= c '逐行讀出工作表中的數(shù)據(jù)
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對(duì)象的索引號(hào)或鍵值，如上面的tvwChild，代表子對(duì)象
'key：可省略，是一個(gè)唯一的字符串，用于在集合中查找Node對(duì)象，如上面的"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 "請(qǐng)輸入姓名！"
Exit Sub
End If
c = TreeView1.Nodes.Count '獲取TreeView控件中節(jié)點(diǎn)數(shù)
For i = 1 To c '判斷是否已有同名節(jié)點(diǎn)
If TreeView1.Nodes(i).Text = str1 Then
MsgBox "列表中已經(jīng)有該姓名，請(qǐng)重新輸入！"
txtName.SetFocus
Exit Sub
End If
Next
Set nodx = TreeView1.Nodes.Add(, , str1, str1, "close", "open") '添加節(jié)點(diǎn)
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 '刪除選定的節(jié)點(diǎn)
End If
End Sub

Private Sub cmdExit_Click()
Unload Me
End Sub

Private Sub cmdExpand_Click()
Dim i As Integer
If cmdExpand.Caption = "展開(kāi)" Then
For i = 1 To TreeView1.Nodes.Count
TreeView1.Nodes(i).Expanded = True '展開(kāi)所有節(jié)點(diǎn)
Next
cmdExpand.Caption = "折疊"
Else
For i = 1 To TreeView1.Nodes.Count
TreeView1.Nodes(i).Expanded = False '折疊所有節(jié)點(diǎn)
Next
cmdExpand.Caption = "展開(kāi)"
End If
End Sub

Private Sub cmdSort_Click()
TreeView1.Sorted = True
End Sub

在上述窗體打開(kāi)后，即可進(jìn)行下面的操作：

－End－

在線咨詢

上一篇：分分鐘免費(fèi)生成精美海報(bào)，贊爆這10個(gè)網(wǎng)站
下一篇：CSS色域、色彩空間、CSS Color 4新標(biāo)準(zhǔn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商