treeview控件 前端开发中，使用TreeView控件创建树形结构

Wijmo是Type编写的新一代Java/HTML5控件集。秉承触摸第一的设计理念，是世界上第一个支持AngularJS的，提供FlexGrid、图表等多种控件，性能卓越，零依赖。

我们已经知道Wijmo 2017V1中添加了TreeView控件，那么如何使用这个控件创建树呢？

下面的小系列会告诉你。

初级课程

使用树形视图控件就像使用任何Wijmo控件一样:

包括所需的脚本，可以从我们的CDN的本地副本中引用。有关详细信息，请参见在您的应用程序中引用Wijmo 5。。

在承载控件的页面上创建一个元素。

初始化控件，即以宿主元素的id作为参数的控件，然后可选地初始化对象。

创建树

要创建树，通常必须设置三个属性:

ItemsSource定义一个包含分层数据的数组。数组中的每一项都包含有关节点数组和(可选)子节点的信息。

DisplayMemberPath定义包含要在树节点中显示的文本的项中的属性的名称。默认情况下，此属性设置为字符串“header”。

ChildItemsPath定义包含子节点数组的项中属性的名称。默认情况下，此属性设置为字符串“items”。

还有用于将节点图像、复选框和折叠状态绑定到项源数组的属性。

默认情况下，当用户单击节点上的任意位置时，TreeView控件会展开折叠的节点。您可以通过将expandOnClick属性设置为false来更改此设置，在这种情况下，只有单击折叠/展开的字形才会影响折叠状态。

样式和CSS

可以使用CSS自定义TreeView的外观。您可以根据节点级别使用不同的字体大小，并在第一级节点的左侧添加竖线。

导航树

TreeView控件最简单也是最常见的用途是导航。TreeView的层次结构和自动搜索功能使用户可以轻松地向下钻取并找到他们感兴趣的项目。

手风琴树

手风琴是多窗格面板，一次只保留一个面板。它们通常用于导航。

可以使用TreeView控件实现手风琴式折叠。

复选框

将“显示复选框”属性设置为真，树视图将向每个节点添加复选框。

当复选框显示时，TreeView管理其层次结构，以便选中或清除复选框时，新值将自动应用于所有子节点，并反映在父节点的状态中。

画

通过在包含图像网址的数据项上指定属性的名称，使用imageMemberPath属性将图像添加到节点。

自定义节点内容

您可以使用formatItem事件自定义树视图节点的内容。事件处理程序参数包括表示要呈现的节点和数据项的元素。

TreeView控件不仅可以创建上述树形结构，还支持禁用节点、延迟加载、拖放、编辑节点和RTL支持等功能。

查看演示和代码

请通过以下方式联系葡萄城查看演示和代码，或免费试用:

微信:GrapeCityDT

邮件:marketing.xa@grapecity.com

官网:wijmo.gcpowertools.com.cn