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的外观。可以根据节点级别使用不同的字体大小，并在一级节点的左侧添加垂直条。

导航树

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－