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

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 <TreeTransfer source={source} target={this.state.target} onChange={this.handleChange}>
  }
}
 
render(<App />, 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.