1 | # bee-tree
|
2 |
|
3 | [![npm version](https://img.shields.io/npm/v/bee-tree.svg)](https://www.npmjs.com/package/bee-tree)
|
4 | [![Build Status](https://img.shields.io/travis/tinper-bee/bee-tree/master.svg)](https://travis-ci.org/tinper-bee/bee-tree)
|
5 | [![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-tree/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-tree?branch=master)
|
6 | [![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-tree.svg)](https://david-dm.org/tinper-bee/bee-tree#info=devDependencies)
|
7 | [![NPM downloads](http://img.shields.io/npm/dm/bee-tree.svg?style=flat)](https://npmjs.org/package/bee-tree)
|
8 | [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-tree.svg)](http://isitmaintained.com/project/tinper-bee/bee-tree "Average time to resolve an issue")
|
9 | [![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-tree.svg)](http://isitmaintained.com/project/tinper-bee/bee-tree "Percentage of issues still open")
|
10 |
|
11 | ## Browser Support
|
12 |
|
13 | |![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)|
|
14 | | --- | --- | --- | --- | --- |
|
15 | | IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
|
16 |
|
17 |
|
18 | ## 使用
|
19 |
|
20 | ### 使用单独的Tree包
|
21 | #### 组件引入
|
22 | 先进行下载Tree包
|
23 | ```
|
24 | npm install --save bee-tree
|
25 | ```
|
26 | 组件调用
|
27 | ```js
|
28 | import Tree from 'bee-tree';
|
29 |
|
30 | const TreeNode = Tree.TreeNode;
|
31 |
|
32 | const defaultProps = {
|
33 | keys: ['0-0-0', '0-0-1']
|
34 | }
|
35 | class Demo1 extends Component {
|
36 | constructor(props) {
|
37 | super(props);
|
38 | const keys = this.props.keys;
|
39 | this.state = {
|
40 | defaultExpandedKeys: keys,
|
41 | defaultSelectedKeys: keys,
|
42 | defaultCheckedKeys: keys,
|
43 | };
|
44 | }
|
45 | onSelect(info) {
|
46 | console.log('selected', info);
|
47 | }
|
48 | onCheck(info) {
|
49 | console.log('onCheck', info);
|
50 | }
|
51 | render() {
|
52 | return (
|
53 | <Tree className="myCls" showLine checkable
|
54 | defaultExpandedKeys={this.state.defaultExpandedKeys}
|
55 | defaultSelectedKeys={this.state.defaultSelectedKeys}
|
56 | defaultCheckedKeys={this.state.defaultCheckedKeys}
|
57 | onSelect={this.onSelect} onCheck={this.onCheck}
|
58 | >
|
59 | <TreeNode title="parent 1" key="0-0">
|
60 | <TreeNode title="parent 1-0" key="0-0-0" disabled>
|
61 | <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
|
62 | <TreeNode title="leaf" key="0-0-0-1" />
|
63 | </TreeNode>
|
64 | <TreeNode title="parent 1-1" key="0-0-1">
|
65 | <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
|
66 | </TreeNode>
|
67 | </TreeNode>
|
68 | </Tree>
|
69 | );
|
70 | }
|
71 | }
|
72 |
|
73 | React.render(<Demo1 />, document.getElementById('target'));
|
74 | ```
|
75 | #### 样式引入
|
76 | - 可以使用link引入dist目录下tree.css
|
77 | ```
|
78 | <link rel="stylesheet" href="./node_modules/build/bee-tree.css">
|
79 | ```
|
80 | - 可以在js中import样式
|
81 | ```js
|
82 | import "./node_modules/src/Tree.scss"
|
83 | //或是
|
84 | import "./node_modules/build/bee-tree.css"
|
85 | ```
|
86 |
|
87 |
|
88 |
|
89 |
|
90 | ## API
|
91 |
|
92 |
|
93 | ## Tree
|
94 | |参数|说明|类型|默认值|
|
95 | |:---|:-----|:----|:------|
|
96 | multiple|是否允许选择多个树节点|bool|false
|
97 | checkable|是否支持添加在树节点前添加Checkbox|bool|false
|
98 | defaultExpandAll|默认是否展开所有节点|bool|false
|
99 | defaultExpandedKeys|默认展开指定的节点|String[]|[]
|
100 | expandedKeys|指定展开的节点(controlled)String[]|[]
|
101 | autoExpandParent|是否自定展开父节点|bool|true
|
102 | defaultCheckedKeys|指定默认被选中的节点key|String[]|[]
|
103 | checkedKeys|指定被选中的节点(controlled)(PS:当指定的是父节点,所有的子节点也会被指定;当指定的是子节点,父节点也会被选中。当checkable和checkStrictly都为true,子节点与父节点的选择情况都不会影响到对方|String[]/{checked:Array,halfChecked:Array}|[]
|
104 | checkStrictly|精细的检查每个节点|bool|false
|
105 | defaultSelectedKeys|指定选中的节点key|String[]|[]
|
106 | selectedKeys|指定选中的节点keys(controlled)|String[]|-
|
107 | onExpand|当打开或关闭树节点触发的方法|function(expandedKeys, {expanded: bool, node})|-
|
108 | onCheck|当选择事件发生触发的方法|function(checkedKeys, e:{checked: bool, checkedNodes, node, event})|-
|
109 | onSelect|当用户选择树节点触发的回调函数|function(selectedKeys, e:{selected: bool, selectedNodes, node, event})|-
|
110 | filterTreeNode|过滤树节点的方法(highlight),当返回true,相关联的节点会高亮|function(node)|-
|
111 | loadData|异步加载数据|function(node)|-
|
112 | onRightClick|当用户点击右键触发的回调函数|function({event,node})|-
|
113 | draggable|树是否可拖拽(IE>8| bool|false
|
114 | onDragStart|当树节点刚开始拖拽所触发的放方法|function({event,node})|-
|
115 | onDragEnter|当拖拽进入触发的方法|function({event,node,expandedKeys})|-
|
116 | onDragOver|当拖拽经过触发的方法|function({event,node})|-
|
117 | onDragLeave|当拖拽离开触发的方法|function({event,node})|-
|
118 | onDragEnd当拖拽结束触发的方法|function({event,node})|-
|
119 | onDrop|当节点放下触发方法function({event, node, dragNode, dragNodesKeys})|-
|
120 | onDoubleClick|当双击发生触发的方法|function(checkedKeys, e:{node, event})|-
|
121 | Children|必填,TreeNode组件|node|-
|
122 | |mustExpandable|支持disabled的节点可以自定义展开收起,默认disabled的节点不可以展开收起|bool|false
|
123 | ## TreeNode
|
124 | |参数|说明|类型|默认值|
|
125 | |:---|:-----|:----|:------|
|
126 | disabled|节点是否不可用|bool|false
|
127 | disableCheckbox|节点的checkbox是否不可用|bool|false
|
128 | title|名称标题|String/element |--
|
129 | key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用,必须是唯一的|String|-
|
130 | isLeaf|是否是叶子节点|bool|false
|
131 | titleClass|名称类名|String|-
|
132 | titleStyle|名称样式|Object|-
|
133 | switcherClass|switcher类名|String|-
|
134 | switcherStyle|switcher样式|Object|-
|
135 | Children|TreeNode组件/无|node|-
|
136 | ext|用户自定义的扩展数据,可以通过treeNode.props.ext获取|Object|-
|
137 |
|
138 |
|
139 | ## 快捷键API
|
140 |
|
141 | | 快捷键 | 类型 |快捷键说明 |
|
142 | | --- | :---: | --- |
|
143 | | focusable | function | 是否开启快捷键 |
|
144 | | tab | - | tab 进入焦点,且选中第一行。|
|
145 | | ↑、↓ | - | ↑(上箭)、↓(下箭) 选中上一行、选中下一行。 |
|
146 | | ←、→ | - | ←(左箭)、→(右箭) 收起、展开。 |
|
147 |
|
148 |
|
149 | #### 开发调试
|
150 |
|
151 | ```sh
|
152 | $ npm install -g bee-tools
|
153 | $ git clone https://github.com/tinper-bee/bee-tree
|
154 | $ cd bee-tree
|
155 | $ npm install
|
156 | $ npm run dev
|
157 | ```
|