树形控件 Tree
issue

何时使用

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

如何使用

import { Tree } from 'tinper-bee';

or

import Tree from 'bee-tree';
import 'bee-tree/build/Tree.css';

能力特性

API

Tree

参数 说明 类型 默认值
multiple 是否允许选择多个树节点 bool false
checkable 节点前添加 Checkbox 复选框 bool false
defaultExpandAll 默认展开所有树节点 bool false
defaultExpandedKeys 默认展开指定的树节点 String[] []
expandedKeys （受控）展开指定的树节点 String[] []
autoExpandParent 是否自动展开父节点 bool true
defaultCheckedKeys 默认选中复选框的树节点 String[] []
checkedKeys （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置checkable和checkStrictly，它是一个有checked和halfChecked属性的对象，并且父子节点的选中与否不再关联 String[]/{checked:Array,halfChecked:Array} []
checkStrictly checkable 状态下节点选择完全受控（父子节点选中状态不再关联） bool false
defaultSelectedKeys 默认选中的树节点 String[] []
selectedKeys （受控）设置选中的树节点 String[] -
cancelUnSelect 选中的节点第二次点击时还是选中，不自动取消选中 bool false
showLine 是否显示连接线 bool false
openIcon 自定义展开节点图标的名称参考这里String[] -
closeIcon 自定义关闭节点图标的名称参考这里String[] -
onExpand 展开/收起节点时触发的回调函数 function(expandedKeys, {expanded: bool, node}) -
onCheck 点击复选框触发的回调方法 function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) -
onSelect 点击树节点触发的回调函数 function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) -
filterTreeNode 按需筛选树节点（高亮）,当返回true,相关联的节点会高亮 function(node) -
loadData 异步加载数据 function(node) -
onRightClick 当用户点击右键触发的回调函数 function({event,node}) -
draggable 树是否可拖拽（IE>8 bool false
onDragStart 当树节点刚开始拖拽所触发的放方法 function({event,node}) -
onDragEnter 当拖拽进入触发的方法 function({event,node,expandedKeys}) -
onDragOver 当拖拽经过触发的方法 function({event,node}) -
onDragLeave 当拖拽离开触发的方法 function({event,node}) -
onDragEnd 当拖拽结束触发的方法 function({event,node}) -
onDrop 当节点放下触发方法 function({event, node, dragNode, dragNodesKeys}) -
onDoubleClick 当双击发生触发的方法 function(checkedKeys, e:{node, event}) -
focusable 是否开启快捷键功能，使用Tab 键导航获取焦点↓↑选中下、上一个节点，→←展开或者收起一个节点,enter键为节点双击事件 bool -
tabIndexValue 节点获取焦点时，自定义tabIndex的值 Number 0
children 必填，TreeNode组件 node -
mustExpandable 支持disabled的节点可以自定义展开收起，默认disabled的节点不可以展开收起。【tinper-bee@2.1.1 新增】 bool false
autoSelectWhenFocus 使用“↑、↓”快捷键切换焦点时，是否自动选中树节点 bool false
expandWhenDoubleClick 双击树节点的时候，是否触发收起/展开动作 bool false
treeData treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） array<{key, title, children, [disabled, selectable]}> -
lazyLoad 是否使用懒加载（适用于大数据场景），如何使用 bool false
renderTitle 使用 treeData 渲染树时使用，可通过此函数自定义树节点内容 Function(item) -
renderTreeNodes 使用 treeData 渲染树节点时，可使用该函数自定义节点显示内容（非必须） Function(data) -
getScrollContainer 用于滚动加载场景，自定义滚动事件监听的容器 Function(data) -

TreeNode

参数 说明 类型 默认值
disabled 节点是否不可用 bool false
disableCheckbox 节点的checkbox是否不可用 bool false
selectable 设置节点是否可被选中 bool true
title 名称标题 String/element --
key 节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的 String -
isLeaf 是否是叶子节点 bool false
titleClass 名称类名 String -
titleStyle 名称样式 Object -
switcherClass switcher类名 String -
switcherStyle switcher样式 Object -
children TreeNode组件/无 node -

快捷键API

快捷键 类型 快捷键说明
focusable bool 是否开启快捷键
tab - tab 进入焦点，且选中第一行。
↑、↓ - ↑(上箭)、↓(下箭) 选中上一行、选中下一行。
←、→ - ←(左箭)、→(右箭) 收起、展开。

注意事项

暂无

更新日志

  • v2.1.22 2020-07-25 ( release地址 ) 

    Features
    

      

    • treeData支持自定义属性[JCJS-2535] (0f4819b)
      •

  • v2.1.21 2020-07-15 ( release地址 ) 

    Bug Fixes
    

      

    • 懒加载无法打开问题修复 (35e9ff6)
      •

  • v2.1.20 2020-06-12 ( release地址 ) 

    Bug Fixes
    

      

    • scrollY未定义 (00da551)
      • 

    • scrollY未定义 (b08ee80)
      • 

    • 懒加载滚动后，复选框不能勾选[IFNC-1116] (4554f26)
      •

  • v2.1.19 2020-05-08 ( release地址 ) 

    Bug Fixes

  • v2.1.12 2019-11-07 ( release地址 ) 

      

    • bee-tree @2.1.12
        

      • [ Fixbug] 解决树参照展开收起问题，树组件异步渲染树节点，设置 defaultExpandAll 属性失效。
        • 

      

      •

  • v2.1.11 2019-10-29 ( release地址 ) 

      

    • bee-tree @2.1.11
        

      • [Fixbug]双击事件触发了两次 onDoubleClick 回调。
        • 

      

      •

  • v2.1.9 2019-10-18 ( release地址 ) 

      

    • bee-tree @2.1.9
        

      • [Fixbug]解决设置 defaultExpandedAll 时，树参照节点自动收起的问题。
        • 

      

      •

  • v2.1.8 2019-09-24 ( release地址 ) 

      

    • bee-tree @2.1.8
        

      • [Feature]支持自定义属性。
        • 

      • [Fixbug]树节点展开鼠标移开后会自动收起来。
        • 

      

      •

  • v2.1.7 2019-09-21 ( release地址 ) 

      

    • bee-tree @2.1.7
        

      • [Feature]支持自定义属性。
        • 

      

      •

  • v2.1.5 2019-09-19 ( release地址 ) 

      

    • bee-tree @2.1.5
        

      • [Fixbug]解决动态改变 treeData 时，没有重新截取数据的问题。
        • 

      • [Update]递归遍历数据方法中，优化对 expandedKeys 的处理。
        • 

      

      •

  • v2.1.6 2019-09-19 ( release地址 ) 

      

    • bee-tree @2.1.6
        

      • [Fixbug]滚动加载时，获取树节点真实行高。
        • 

      

      •

  • v2.1.4 2019-09-12 ( release地址 ) 

      

    • bee-tree @2.1.4
        

      • [Fixbug]解决动态改变 treeData 时，没有重新截取数据的问题。
        • 

      • [Update]递归遍历数据方法中，优化对 expandedKeys 的处理。
        • 

      

      •

  • v2.1.3 2019-09-12 ( release地址 ) 

      

    • bee-tree @2.1.3
        

      • [Fixbug]解决动态获取数据源时，defaultExpandAll 和 defaultExpandedKeys 不生效的问题。
        • 

      

      •

  • v2.1.2 2019-09-02 ( release地址 ) 

      

    • bee-tree @2.1.2
        

      • [Fixbug]滑动过程中出现层级结构错乱。
        • 

      • [Fixbug]树元数据序列化react dom节点信息丢失。
        • 

      • [Fixbug]解决数据量少时，出现滚动条的问题。
        • 

      • [Fixbug]动态补全父节点时，层级顺序不对的问题。
        • 

      • [Feature]增加 expandWhenDoubleClick API，设置双击树节点的时候，是否触发收起/展开动作。
        • 

      

      •

  • v2.1.1 2019-08-26 ( release地址 ) 

      

    • bee-tree @2.1.1
        

      • [Feature]增加 getScrollContainer 属性，自定义滚动事件监听的容器
        • 

      

      •

  • v2.1.0 2019-08-20 ( release地址 ) 

      

    • bee-tree @2.1.0
        

      • [Fixbug]组件更新时，treeData 加容错处理。
        • 

      • [Fixbug]解决滚动加载场景，自定义属性丢失问题。
        • 

      • [Feature]增加参数 autoSelectWhenFocus，控制“↑、↓”快捷键切换焦点时，是否自动选中树节点。
        • 

      

      •

  • v2.0.18 2019-08-20 ( release地址 ) 

      

    • bee-tree @2.0.18
        

      • [Fixbug]不带复选框的树，不能通过空格键选中树节点的问题
        • 

      

      •

  • v2.0.17 2019-08-20 ( release地址 ) 

      

    • bee-tree @2.0.17
        

      • [Fixbug]hover行背景色宽度修改
        • 

      

      •

  • 2.0.16 2019-07-06 ( release地址 ) 

      

    • bee-tree @2.0.16
        

      • [Feature]快捷键操作节点状态扩展，增加移动状态。
        • 

      

      •

  • v2.0.15-new 2019-07-04 ( release地址 ) 

    ul获取焦点兼容处理,防止已选中的节点再次选中

  • v2.0.14 2019-06-26 ( release地址 ) 

    增加mustExpandable属性，支持用户自定义禁用的节点是否可以展开收起，默认不可以展开

  • V2.0.12 2019-05-17 ( release地址 ) 

    1、checkStrictly为false时动态改变数据源造成的onCheck回调参数错误问题
2、优化是否是叶子节点判断方法

  • v2.0.10 2019-04-25 ( release地址 ) 

      

    • bee-tree @2.0.10
        

      • [Fixbug]解决树参照默认带有滚动条问题
        • 

      

      •

  • v2.0.9 2019-04-10 ( release地址 ) 

      

    • bee-tree @2.0.9
        

      • [Feature]组件样式按规范调整
        • 

      

      •

  • v2.0.8 2019-04-09 ( release地址 ) 

      

    • [Feature]bee-tree @2.0.8，升级依赖
      •

  • v2.0.5 2019-03-08 ( release地址 ) 

    [fix] 单击事件（onSelect）延迟问题

  • v2.0.4 2019-03-07 ( release地址 ) 

      

    • [Feature]bee-tree @2.0.4
        

      • 树节点文字区上下增加2px的边距
        • 

      

      •

  • v2.0.2 2019-03-02 ( release地址 ) 

      

    • [Feature]bee-tree @2.0.2
        

      • 去掉树节点hover时的outline描边
        • 

      • disable态的树节点去掉hover样式
        • 

      

      •

相关资源

社区

帮助

联系我们

  • 北京市海淀区北清路68号用友产业园
  • guoyff@yonyou.com

版权所有：用友网络科技股份有限公司 2017 京ICP备05007539号-7 京ICP证100714号 京公网安备1101080209224号

Powered by yonyou