一个基于React的数据/字段映射组件

✨ 特性

🔨快速本地DEMO

git clone git@github.com:aliyun/react-data-mapping.git
npm install
cd example
npm install
npm start

📦 安装

npm install react-data-mapping

API:

DataMapping属性

Column

sourceData

targetData

mappingData

config

extraPos

checkable

🔗API

interface columns { // 设置每列的属性
 title ? : string; // 每列的title,类似thead的概念
 key: string; // 每列的唯一标志,对应数据上的key值
 width ? : number; // 每列宽度
 primaryKey: boolean // 这列的key对应的value是否作为键值对
}
interface config {
 delayDraw: number; // 延迟渲染,此组件一定要确保画布容器渲染(包括动画执行)完毕才能渲染,否则坐标都产生偏移,如:antd的modal的动画
 extraPos ? : { // 画布渲染的时候会留padding
 paddingLeft ? : number,
 paddingRight ? : number,
 paddingTop ? : number,
 paddingBottom ? : number,
 paddingCenter ? : number,
 },
 sortable ? : boolean | { // 排序支持,假如是true,会整个画布都支持排序
 source ? : boolean, // 假如是true,单纯左侧来源表支持排序
 target ? : boolean // 假如是true,单纯左侧目标表支持排序
 },
 linkNumLimit ? : number | { // 连线数量支持,假如是number,会整个画布都支持n条连线
 source ? : number, // 假如是number,单纯左侧来源表支持n条连线
 target ? : number // 假如是number,单纯左侧来源表支持n条连线
 },
 checkable ?: { // 源表目标表是否有勾选框
 source ? : boolean, // 假如是true,单纯左侧来源表支持勾选框
 target ? : boolean
 }
}
interface ComProps { // 组件props属性
 width ? : number | string; // 组件的宽度,自适应的话可以设置"auto"
 height ? : number | string; // 组件的高度,自适应的话可以设置"auto"
 type ? : string; // "single"or"mutiply",单表映射(上图一) or 多表映射(上图二)
 className ? : string; // 组件类名
 sourceClassName ? : string; // 来源表类名
 targetClassName ? : string; // 目标表类名
 columns: Array < columns > ; // 请参考上述interface columns
 sourceData: Array < any > | Object; // 单表映射对应Object,多表映射Array,可参考demo
 targetData: Array < any > | Object; // 单表映射对应Object,多表映射Array,可参考demo
 mappingData: Array < any > ; // 初始化对应关系数据,可参考demo
 emptyContent ? : string | JSX.Element; // 当表字段为空时显示内容
 emptyWidth ? : number | string; // 当表字段为空时表容器宽度
 isConnect?(edge: any): boolean; // 每次连线前触发isConnect,返回true则进行连线,false则不会
 onChange(data: any): void; // 每次连线都是触发onChange事件
 onRowMouseOver?(row:any):void, // 鼠标移入某一行数据时触发
 onRowMouseOut?(row:any):void, // 鼠标移出某一行数据时触发
};

import ButterflyDataMapping from 'react-data-mapping';
import 'react-data-mapping/dist/index.css';
<ButterflyDataMapping
 width={500}
 height={1000}
 type={'single'}
 columns={columns}
 sourceData={sourceData}
 targetData={targetData}
 mappingData={mappingData}
 className={'butterfly-data-mappint'}
 sourceClassName={'source-column'}
 targetClassName={'target-column'}
/>