tree-transfer
Version:
react antd tree transfer (tree to tree)
115 lines (107 loc) • 2.51 kB
Markdown
## tree-transfer
---
React tree transfer Component with antd
### Install
```
npm i tree-transfer -S
```
### Example
```
npm i
npm run dev
```
### Usage
```javaScript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {TreeTransfer,getAllTreeData} from 'tree-transfer';
const Data = [
{
"key": "0-0",
"title": "T0-0"
},
{
"key": "0-0-0",
"title": "T0-0-0",
"parentKey": "0-0"
},
{
"key": "0-0-0-0",
"title": "T0-0-0-0",
"parentKey": "0-0-0"
},
{
"key": "0-0-0-0-0",
"title": "T0-0-0-0-0",
"parentKey": "0-0-0-0"
}
];
const leftTree = Data;
const rightTree = [];
class App extends Component {
constructor(props) {
super(props);
}
componentWillMount() {}
handleClick =()=>{
console.log(getAllTreeData());
}
render() {
return (<div style={{ height: '500px' }}>
<TreeTransfer
placeholder={'Search'}
showSearch={true}
treeWidth={250}
treeHeight={400}
getAllTreeData={getAllTreeData} leftTreeData={ leftTree } rightTreeData={ rightTree}
leftTitle={'左树'}
rightTitle={'右树'}/>
<button onClick={this.handleClick}>获取数据</button>
</div>
);
}
}
ReactDOM.render(<App />,document.querySelector('#app'));
```
### API
|参数|说明|类型|默认值
|-|-|-|-|
|showSearch|是否显示搜索框|boolean|false|
|placeholder|搜索框占位符|string|——|
|treeWidth|树容器宽度|number|250|
|treeHeight|树容器高度|number|400|
|leftTitle|左侧容器标题|string|——|
|rightTitle|右侧容器标题|string|——|
|leftTreeData|左侧树数据源|array|[]|
|rightTreeData|右侧树数据源|array|[]|
|getAllTreeData|获取所有树数据|object,{leftTreeNewData:[],rightTreeNewData:[]}|——|
|transferBtns|穿梭按钮定义|array,具体配置见 **穿梭按钮定制**|——|
### 穿梭按钮定制
```javaScript
// transferBtns 默认值
[{
key: 'allToRight',
name: '>>',
className: ''
},
{
key: 'toRight',
name: '>',
className: ''
},
{
key: 'tolLeft',
name: '<',
className: ''
},
{
key: 'allToLeft',
name: '<<',
className: ''
}]
```
|参数|说明|类型|默认值
|-|-|-|-|
|key|按钮标识|string|['allToRight -- 全部向右穿梭按钮','toRight -- 向右穿梭按钮','tolLeft -- 向左穿梭按钮','allToLeft -- 全部向左穿梭按钮']|
|name|穿梭按钮显示名称|string|——|
|className|穿梭按钮类名|string|——|