antd-tree-transfer

    0.0.3 • Public • Published

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


    React tree transfer Component with antd

    NPM version NPM downloads Test coverage

    Install

    rc-rate

    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.

    Keywords

    none

    Install

    npm i antd-tree-transfer

    DownloadsWeekly Downloads

    6

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    1.01 MB

    Total Files

    4

    Last publish

    Collaborators

    • jindada