A React Component which focus

English | 简体中文

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属性

列描述数据对象，是Columns中的一项

来源表数据，当type为 single 时，sourceData的类型为{ }；当type为 mutiply 时，sourceData的类型为[ ]

目标表数据，当type为 single 时，targetData的类型为{ }；当type为 mutiply 时，targetData的类型为[ ]，属性详情见sourceData

组件的额外属性配置

画布渲染的时候预留padding

来源表，目标表是否有勾选框

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'} />

如需要更多定制的需求，您可以提issue或者参考Butterfly来定制您需要的需求