readme
This commit is contained in:
ahua52
parent
d53c451d4d
commit
4fd86c2acf
112
README.md
112
README.md
|
|
@ -15,23 +15,117 @@
|
|||
| IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
|
||||
|
||||
|
||||
react bee-tree component for tinper-bee
|
||||
|
||||
some description...
|
||||
|
||||
## 使用方法
|
||||
|
||||
```js
|
||||
## 使用
|
||||
|
||||
### 使用单独的Tree包
|
||||
#### 组件引入
|
||||
先进行下载Tree包
|
||||
```
|
||||
npm install --save bee-tree
|
||||
```
|
||||
组件调用
|
||||
```js
|
||||
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样式
|
||||
```js
|
||||
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})|-
|
||||
|
||||
## TreeNode
|
||||
|参数|说明|类型|默认值|
|
||||
|:---|:-----|:----|:------|
|
||||
disabled|节点是否不可用|bool|false
|
||||
disableCheckbox|节点的checkbox是否不可用|bool|false
|
||||
title|名称标题|String/element |--
|
||||
key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|-
|
||||
isLeaf|是否是叶子节点|bool|false
|
||||
#### 开发调试
|
||||
|
||||
```sh
|
||||
|
|
|
|||
Loading…
Reference in New Issue