antd-tree-transfer

antd-tree-transfer (old: lucio-tree-transfer)

---

React tree transfer Component with antd


Install


Development

``
npm install
npm start
`

Example

http://localhost:9000/

online example: https://jindada.github.io/tree-transfer/




Usage

`js
import React, { Component } from 'react';
import TreeTransfer from 'antd-tree-transfer';

const source = [
{
key: '0',
title: '0',
children: [
{
key: '0-0',
title: '0-0',
},
{
key: '0-1',
title: '0-1',
}
]
}
],

class App extends Component {
state = {
target: ['0-1']
}

handleChange = (target) => {
this.setState({
target
});
}

render() {
return
}
}

render(, document.querySelector('#app'));
``

API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 选择器 className | String | - |
| rowKey | 指定数据列的key | String | 'key' |
| rowTitle | 指定数据列的title | String | 'title' |
| rowChildren | 指定数据列的children | String | 'children' |
| source | 数据源，其中的数据将会被渲染到左侧框（Tree）中 | Array | [] |
| target | 显示在右侧框数据的key集合 | Array | [] |
| sourceTitle | 左侧框标题 | String | '源数据' |
| targetTitle | 右侧框标题 | String | '目的数据' |
| treeLoading | 加载状态 | Boolean | false |
| showSearch | 是否显示搜索框 | Boolean | false |
| onLoadData | 异步加载数据 | function(node) | - |
| onTreeSearch | 异步搜索数据 | function(value) | - |

License

antd-tree-transfer is released under the MIT license.