Git Product home page Git Product logo

tree-transfer's Introduction

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://luciojs.github.io/tree-transfer/

Usage

import React, { Component } from 'react';
import { TreeTransfer } from 'loading';

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

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

tree-transfer's People

Contributors

jindada avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.