bee-tree
Tree ui component for react
Last updated 5 days ago by tinper-bot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-tree 
SYNC missed versions from official npm registry.

bee-tree

npm version Build Status Coverage Status devDependency Status NPM downloads Average time to resolve an issue Percentage of issues still open

Browser Support

IE Chrome Firefox Opera Safari
IE 9+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

使用

使用单独的Tree包

组件引入

先进行下载Tree包

npm install --save bee-tree

组件调用

import Tree from 'bee-tree';

const TreeNode = Tree.TreeNode;

const defaultProps = {
	keys: ['0-0-0', '0-0-1']
}
class Demo1 extends Component {
	constructor(props) {
		super(props);
	    const keys = this.props.keys;
	    this.state = {
	      defaultExpandedKeys: keys,
	      defaultSelectedKeys: keys,
	      defaultCheckedKeys: keys,
	    };
	}
	onSelect(info) {
	    console.log('selected', info);
	}
	onCheck(info) {
	    console.log('onCheck', info);
	}
	render() {
	    return (
	      <Tree className="myCls" showLine checkable
	        defaultExpandedKeys={this.state.defaultExpandedKeys}
	        defaultSelectedKeys={this.state.defaultSelectedKeys}
	        defaultCheckedKeys={this.state.defaultCheckedKeys}
	        onSelect={this.onSelect} onCheck={this.onCheck}
	      >
	        <TreeNode title="parent 1" key="0-0">
	          <TreeNode title="parent 1-0" key="0-0-0" disabled>
	            <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
	            <TreeNode title="leaf" key="0-0-0-1" />
	          </TreeNode>
	          <TreeNode title="parent 1-1" key="0-0-1">
	            <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
	          </TreeNode>
	        </TreeNode>
	      </Tree>
	    );
	}
}

React.render(<Demo1 />, document.getElementById('target'));

样式引入

  • 可以使用link引入dist目录下tree.css
<link rel="stylesheet" href="./node_modules/build/bee-tree.css">
  • 可以在js中import样式
import "./node_modules/src/Tree.scss"
//或是
import "./node_modules/build/bee-tree.css"

API

Tree

参数 说明 类型 默认值
multiple 是否允许选择多个树节点 bool false
checkable 是否支持添加在树节点前添加Checkbox bool false
defaultExpandAll 默认是否展开所有节点 bool false
defaultExpandedKeys 默认展开指定的节点 String[] []
expandedKeys 指定展开的节点(controlled)String[] []
autoExpandParent 是否自定展开父节点 bool true
defaultCheckedKeys 指定默认被选中的节点key String[] []
checkedKeys 指定被选中的节点(controlled)(PS:当指定的是父节点,所有的子节点也会被指定;当指定的是子节点,父节点也会被选中。当checkable和checkStrictly都为true,子节点与父节点的选择情况都不会影响到对方 String[]/{checked:Array,halfChecked:Array} []
checkStrictly 精细的检查每个节点 bool false
defaultSelectedKeys 指定选中的节点key String[] []
selectedKeys 指定选中的节点keys(controlled) 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 过滤树节点的方法(highlight),当返回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}) -
Children 必填,TreeNode组件 node -
mustExpandable 支持disabled的节点可以自定义展开收起,默认disabled的节点不可以展开收起 bool false

TreeNode

参数 说明 类型 默认值
disabled 节点是否不可用 bool false
disableCheckbox 节点的checkbox是否不可用 bool false
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 -
ext 用户自定义的扩展数据,可以通过treeNode.props.ext获取 Object -

快捷键API

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

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-tree
$ cd bee-tree
$ npm install
$ npm run dev

Current Tags

  • 2.1.14-alpha.0                                ...           alpha (7 months ago)
  • 2.1.2-beta.2                                ...           beta (a year ago)
  • 2.1.27                                ...           latest (5 days ago)
  • 2.1.27-yonui.0                                ...           yonui (7 days ago)

114 Versions

  • 2.1.27                                ...           5 days ago
  • 2.1.27-yonui.0                                ...           7 days ago
  • 2.1.26                                ...           8 days ago
  • 2.1.25                                ...           8 days ago
  • 2.1.24                                ...           a month ago
  • 2.1.22                                ...           3 months ago
  • 2.1.21                                ...           3 months ago
  • 2.1.20                                ...           4 months ago
  • 2.1.19                                ...           5 months ago
  • 2.1.18                                ...           6 months ago
  • 2.1.17                                ...           6 months ago
  • 2.1.16                                ...           7 months ago
  • 2.1.15                                ...           7 months ago
  • 2.1.14                                ...           7 months ago
  • 2.1.14-alpha.0                                ...           7 months ago
  • 2.1.13                                ...           8 months ago
  • 2.1.13-alpha.2                                ...           8 months ago
  • 2.1.13-alpha.1                                ...           8 months ago
  • 2.1.13-alpha.0                                ...           8 months ago
  • 2.1.12                                ...           a year ago
  • 2.1.12-alpha.2                                ...           a year ago
  • 2.1.12-alpha.1                                ...           a year ago
  • 2.1.12-alpha.0                                ...           a year ago
  • 2.1.11                                ...           a year ago
  • 2.1.11-alpha.0                                ...           a year ago
  • 2.1.10                                ...           a year ago
  • 2.1.9                                ...           a year ago
  • 2.1.9-alpha.0                                ...           a year ago
  • 2.1.8                                ...           a year ago
  • 2.1.8-alpha.1                                ...           a year ago
  • 2.1.7                                ...           a year ago
  • 2.1.6                                ...           a year ago
  • 2.1.5                                ...           a year ago
  • 2.1.4                                ...           a year ago
  • 2.1.3                                ...           a year ago
  • 2.1.3-alpha.0                                ...           a year ago
  • 2.1.2                                ...           a year ago
  • 2.1.2-beta.2                                ...           a year ago
  • 2.1.2-beta.1                                ...           a year ago
  • 2.1.2-beta.0                                ...           a year ago
  • 2.1.1                                ...           a year ago
  • 2.1.1-beta.1                                ...           a year ago
  • 2.1.1-beta.0                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 2.1.0-beta.2                                ...           a year ago
  • 2.1.0-beta.1                                ...           a year ago
  • 2.1.0-beta.0                                ...           a year ago
  • 2.0.18                                ...           a year ago
  • 2.0.18-alpha.0                                ...           a year ago
  • 2.0.18-beta.0                                ...           a year ago
  • 2.0.17                                ...           a year ago
  • 2.0.16-beta.1                                ...           a year ago
  • 2.0.16                                ...           a year ago
  • 2.0.16-beta.0                                ...           a year ago
  • 2.0.15                                ...           a year ago
  • 2.0.15-beta.0                                ...           a year ago
  • 2.0.14                                ...           a year ago
  • 2.0.14-beta.0                                ...           a year ago
  • 2.0.13                                ...           a year ago
  • 2.0.13-beta.0                                ...           a year ago
  • 2.0.12                                ...           a year ago
  • 2.0.11-beta.1                                ...           a year ago
  • 2.0.11-beta.0                                ...           a year ago
  • 2.0.11                                ...           a year ago
  • 2.0.10                                ...           a year ago
  • 2.0.10-beta.1                                ...           a year ago
  • 2.0.10-beta.0                                ...           2 years ago
  • 2.0.9                                ...           2 years ago
  • 2.0.8                                ...           2 years ago
  • 2.0.7                                ...           2 years ago
  • 2.0.6                                ...           2 years ago
  • 2.0.5                                ...           2 years ago
  • 2.0.4                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.3-beta.1                                ...           2 years ago
  • 2.0.3-beta.0                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.1.16                                ...           2 years ago
  • 2.0.0-alpha.1                                ...           2 years ago
  • 2.0.0-alpha.0                                ...           2 years ago
  • 1.1.15                                ...           2 years ago
  • 1.1.14                                ...           2 years ago
  • 1.1.13                                ...           2 years ago
  • 1.1.12                                ...           2 years ago
  • 1.1.11                                ...           2 years ago
  • 1.1.10                                ...           2 years ago
  • 1.1.9                                ...           2 years ago
  • 1.1.8                                ...           2 years ago
  • 1.1.7                                ...           2 years ago
  • 1.1.6                                ...           2 years ago
  • 1.1.5                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.9                                ...           3 years ago
  • 1.0.8                                ...           3 years ago
  • 1.0.7                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 11.0.3                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.1                                ...           4 years ago

Copyright 2014 - 2016 © taobao.org |