bee-tree/README.md

6.7 KiB
Raw Permalink Blame History

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