Angular_树形控件

发布时间：2020-12-17 08:22:36 所属栏目：安全来源：网络整理

导读：Tree 树形控件何时使用# 文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。代码演示 root1 child1 child1.1 child1.2 child2 root2 root3 基本最简

Tree树形控件

何时使用#

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

代码演示

 
    root1 
      child1 
        child1.1
child1.2
child2
root2
root3
 
    基本 
     
最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
 
    root1
root2 
      child2.1
child2.2 
        grandchild2.2.1
root3
 
连接线 
     
带连接线的树。
 
    root1
root2
可搜索 
     
可搜索的树。
 
    root1
root2
root3
 
拖动示例 
     
将节点拖拽到其他节点内部或前后。
 
    root1
root2
root3
 
自定义图标 
     
可以针对不同节点采用样式覆盖的方式定制图标，双击展开。
 
    root1
root2
root3
 
异步数据加载 
     
点击展开节点，动态加载数据，直到执行 addChildren() 方法取消加载状态。

API#

Tree props#

参数	说明	类型	默认值
nzTreeData	元数据,单个节点结构参考NzTreeNode	array	[]
nzCheckable	节点前添加 Checkbox 复选框	boolean	false
nzShowExpand	节点前添加展开图标	true
nzShowLine	是否展示连接线	nzAsyncData	是否异步加载(显示加载状态)	nzDraggable	设置节点可拖拽（IE>8）	nzMultiple	支持点选多个节点（节点本身）	nzDefaultExpandAll	默认展开所有树节点	nzDefaultExpandedKeys	默认展开指定的树节点	string[]	nzDefaultCheckedKeys	默认选中复选框的树节点	nzDefaultSelectedKeys	默认选中的树节点(nzMultiple为true)	nzSearchValue	按需筛选树高亮节点(结合搜索控件)	string	null
nzClick	点击树节点触发	EventEmitter<NzFormatEmitEvent>	-
nzDblClick	双击树节点触发	nzContextMenu	右键树节点触发	nzCheckBoxChange	点击树节点 Checkbox 触发	nzExpandChange	点击展开树节点图标触发	nzOnDragStart	开始拖拽时调用	nzOnDragEnter	dragenter 触发时调用	nzOnDragOver	dragover 触发时调用	nzOnDragLeave	dragleave 触发时调用	nzOnDrop	drop 触发时调用	nzOnDragEnd	dragend 触发时调用	-

NzTreeNodeOptions propstitle

标题

'---'

key 整个树范围内的所有节点的 key 值不能重复且不为空！ children 子节点 array<NzTreeNodeOptions> isLeaf 设置为叶子节点(叶子节点不可被拖拽模式放置) checked 设置节点 Checkbox 是否选中 selected 设置节点本身是否选中 expanded 设置节点是否展开(叶子节点无效) selectable 设置节点是否可被选中 disabled 设置是否禁用节点(不可进行任何操作) disableCheckbox 设置节点禁用 Checkbox false

NzFormatEmitEvent propseventName 事件名 enum:`clickdblclickcontextmenucheckexpand`&`dragstartdragenterdragoverdragleavedropdragend` '' node 当前操作节点(拖拽时表示目标节点) NzTreeNode event 原生事件 MouseEvent`DragEvent` dragNode? 当前拖拽节点(拖拽时存在) selectedKeys? 已选中的节点(单击时存在) array<NzTreeNode> checkedKeys? checkBox 已选中的节点(点击 checkBox 存在) []

NzTreeNode props方法返回值类型 NzTreeNodeOptions.title key值 NzTreeNodeOptions.key level 层级(最顶层为0,子节点逐层加1) number number array<NzTreeNode> treeOptions 原始节点树结构 NzTreeNodeOptions NzTreeNodeOptions getParentNode 获取父节点 function `NzTreeNode`或`null` 是否为叶子节点 true或`false` isExpanded 是否已展开 isDisabled 是否禁用 isDisableCheckbox 是否禁用 checkBox isSelectable 是否可选中 isChecked 是否选中 checkBox isAllChecked 子节点是否全选 isHalfChecked 子节点有选中但未全选 isSelected 是否已选中 isLoading 是否异步加载状态(影响展开图标展示) isMatched title是否包含nzSearchValue(搜索使用) getChildren 获取子节点,返回NzTreeNode数组 NzTreeNode[] addChildren 添加子节点,接收NzTreeNode或NzTreeNodeOptions数组,第二个参数为插入的索引位置 (children: array,index?: number )=>{} void clearChildren 清除子节点 void

注意#

nzDefaultExpandedKeys、nzDefaultCheckedKeys初始化时将不关联子节点!

地址：https://ng.ant.design/version/0.7.x/components/tree/zh

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!