1.0.5 • Published 4 years ago
@everhour/antd-tree-transfer v1.0.5
@everhour/antd-tree-transfer
React tree transfer Component with antd
Install
npm i @everhour/antd-tree-transfer -S
Example
npm i
npm run dev
Usage
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {TreeTransfer,getAllTreeData} from '@everhour/antd-tree-transfer';
const Data = [
{
key: "database1",
title: "库",
value: "database1-v"
},
{
key: "table1",
title: "表",
value: "table1",
parentKey: "database1"
},
{
key: "database2",
value: "database2",
title: ""
},
{
key: "sys_user",
title: "表",
value: "sys_user",
parentKey: "database2"
},
{
key: "sys_account",
title: "表",
value: "sys_account",
parentKey: "database2"
},
{
key: "sys_shop",
title: "表",
value: "sys_shop",
parentKey: "database2"
},
{
key: "database3",
title: "",
value: "database3"
}
];
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={'右树'}
editSaveCallBack={}
editOnChangeCallBack={}
/>
<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,具体配置见 穿梭按钮定制 | —— |
editSaveCallBack | 节点编辑保存回调 | Promise | —— |
editOnChangeCallBack | 编辑 Input onChange 回调 | Promise | —— |
穿梭按钮定制
// 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 | —— |