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

前端开发中,使用TreeView控件创建树形结构Wijmo是一款使用TypeScript编写的新一代JavaScript/HTML5控件集。它秉承触

欢迎大家来到IT世界,在知识的湖畔探索吧!

Wijmo是一款使用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来更改此设置,在这种情况下,只有在折叠/展开的字形上的点击才会影响折叠状态。前端开发中,使用TreeView控件创建树形结构

样式和CSS

您可以使用CSS自定义TreeView的外观。可以根据节点级别使用不同的字体大小,并在一级节点的左侧添加垂直条。前端开发中,使用TreeView控件创建树形结构

导航树

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

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

手风琴树

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

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

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

复选框

将showCheckboxes属性设置为true,TreeView将向每个节点添加复选框。

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

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

图片

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

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

自定义节点内容

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

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

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

查看演示和代码

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

微信:GrapeCityDT

邮件:marketing.xa@grapecity.com

官网:wijmo.gcpowertools.com.cn

关于葡萄城控件

葡萄城是一家跨国软件研发集团,专注控件领域近30年,是全球最大的控件提供商,也是微软认证的金牌合作伙伴。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/48599.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信