bee-tree
Browser Support
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">
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