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

Wijmo是一款使用Type编写的新一代Java/HTML5控件集。它秉承触控优先的设计理念,在全球率先支持AngularJS,并提供性能卓越、零依赖的FlexGrid和图表等多个控件。

我们已经知道在Wijmo 2017V1版本中新增了TreeView控件,那么如何使用这个控件来创建树呢?

下面小编来告诉大家。

入门

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

包括所需的脚本,可以从我们的CDN的本地副本引用。详情请参阅 在您的应用程序中引用Wijmo 5。.

在托管该控件的页面上创建元素。

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

创建树

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

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

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

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返回搜狐,查看更多

责任编辑:

android treeview 树形结构,前端开发中,使用TreeView控件创建树形结构相关推荐

  1. android开发中为MultiAutoCompleteTextView控件添加其他分隔符

    android开发中为MultiAutoCompleteTextView控件添加其他分隔符,例如:分隔符改为分号";" zs;ls;ww;xm //SemicolonTokeniz ...

  2. 葡萄城首席架构师:前端开发与Web表格控件技术解读

    讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始 ...

  3. Android开发中目前流行控件和知识点总结

    1.SlidingMenu 滑动菜单 应用案例:Facebook . Path 2.0 .人人.网易新闻 下载地址: https://github.com/jfeinstein10/SlidingMe ...

  4. SNF开发平台WinForm-Grid表格控件大全

    我们在开发系统时,会有很多种控件进行展示,甚至有一些为了方便的一些特殊需求. 那么下面就介绍一些我们在表格控件里常用的方便的控件:   1.Grid表格查询条 Grid表格下拉 3.Grid表格弹框选 ...

  5. 表单html遇到的问题及处理,Web前端开发中常见问题及解决方案

    Web前端开发中常见问题及解决方案 时间:2017-04-24     来源:web前端开发小赢家 作为一名web前端开发工程师,我们在工作时免不了会遇到各种各样的问题.因为web前端开发相对于Jav ...

  6. 前端开发中常用设计模式-总结篇

    本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式 通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...

  7. 初学者Web介绍一些前端开发中的基本概念用到的技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

  8. 前端开发中的MCRV模式

    针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为基础,结合Web前端开发中内容-结构-表现-行为相分离的开发标准, ...

  9. 前端开发中icon图标使用的那些门道儿

    前端开发图标使用 在日常开发,前端coder绕不开一个话题,在页面上添加各种小图标,比如 或者是这样的: 一般来说,总体上有三种方案: 位图图标,png图片,经典的使用场景--精灵图: 字体图标,比较 ...

最新文章

  1. 基于深度卷积神经网络的小样本分割算法综述
  2. R语言:如何快速生成许多差异明显的颜色?
  3. ImportError: cannot import name 'AccessCalendar'
  4. html canvas抽奖,HTML5 Canvas圆盘抽奖应用(适用于Vue项目)
  5. 表操作,数据操作,单表查询,python操作数据库
  6. SSL 1760——商店选址问题(最短路)
  7. 动态BGP和静态BGP的含义与区别
  8. 前端系统化学习【JS篇】:(四)Javascript中的数据类型
  9. SpringMVC中获得HttpRequest对象的方法
  10. 2017级C语言大作业 - 密室逃生
  11. 《庆余年》里的五竹,到底是不是机器人?
  12. http://www.cnblogs.com/huxj/archive/2009/11/21/1607791.html
  13. python aes加密每次密码不一样_记AES加密在linux系统每次都不一样的问题
  14. lyle的第一篇博客
  15. php7 libevent扩展,php7下安装event扩展方法
  16. HTML5个人博客首页demo
  17. 小马哥---高仿苹果6p 主板型号Q33-qhd 刷机拆机主板图与开机界面图 与Q33-hd主板对比差别图
  18. 这个对PID的讲解也是不错的,和我当初在B站上看到的一个英文视频类似
  19. 电脑文件夹,显示在另一个程序打开
  20. 学计算机专业买什么牌子的电脑好,学习平板电脑什么牌子好【图解】

热门文章

  1. pr13.0 2019 视频添加静态文字,修改字体类型,修改字体大小
  2. Python操作word文档,添加内容
  3. 1万步21天钉钉运动大神赛
  4. 前端基础学习——带你全面掌握HTML语言
  5. STM32 USART串口通讯初试【查询方式】
  6. keepalived 检测服务状态、keepalived 检测脚本
  7. 魅族16Android版本,魅族16哪个版本性价比高?
  8. 名编辑电子杂志大师教程 | 如何使用名编辑上传功能?
  9. 惠普232dw/233dw激光打印机手机WIFI连接实操、初始化
  10. 第一代科学计算机主要用于,第一代计算机