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

English | 简体中文
✨ 特性
- 支持定制字段属性
- 支持表名定制
- 支持字段连接数量限制
- 支持字段排序
- 支持延迟渲染,自动适配高宽,四周留白等配置
- 支持空字段内容定制
🔨快速本地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属性
width | 组件宽度 | number | 默认500,自适应的话可以设置"auto" |
height | 组件高度 | number | 默认500,自适应的话可以设置"auto" |
type | 映射类型 | string | single | mutiply ,默认 single |
className | 组件类名 | string | - |
sourceClassName | 来源表类名 | string | - |
targetClassName | 目标表类名 | string | - |
columns | 每列的属性 | Columns | Array<Columns> | undefined |
sourceData | 来源表数据 | SourceData | Object | Array<SourceData> | undefined |
targetData | 目标表数据 | TargetData | Object | Array<TargetData> | undefined |
mappingData | 初始映射关系,见mappingData Prop | array | [ ] |
emptyContent | 当表字段为空时显示内容 | string | ReactNode | - |
emptyWidth | 当表字段为空时,表容器的宽度 | string | number | 150 |
config | 组件的额外属性配置,见config Prop | object | { } |
isConnect | 每次连线前触发,判断是否可以连线 | function(edge): boolean | |
onChange | 每次连线触发事件 | function | |
onRowMouseOver | 鼠标移入某一行数据时触发 | function(row) | |
onRowMouseOut | 鼠标移出某一行数据时触发 | function(row) | |
onEdgeClick | 点击连线时触发 | function(row) | |
readonly | 是否只读 | boolean | 默认false |
Column
列描述数据对象,是Columns中的一项
key | 列数据在数据项中对应的路径 | string | - |
title | 列头显示文字 | string | - |
width | 列宽度 | number | - |
primaryKey | 此属性是否为该组数据唯一标识 | boolean | 必须且仅有一个属性为true |
render | 自定义渲染函数,参数分别为当前行的值,当前行数据,行索引 | function(text, record, index) {} | - |
sourceData
来源表数据,当type为 single
时,sourceData的类型为{ };当type为 mutiply
时,sourceData的类型为[ ]
id | 列标识, single 类型下,id可不填, mutiply 为必填 | string | - |
title | 列标题 | string | - |
fileds | 数据数组 | array | - |
checked | 勾选框是否已勾选 | boolean | false |
disable | 禁止连线 | boolean | false |
targetData
目标表数据,当type为 single
时,targetData的类型为{ };当type为 mutiply
时,targetData的类型为[ ],属性详情见sourceData
mappingData
config
组件的额外属性配置
delayDraw | 延迟渲染,此组件一定要确保画布容器渲染(包括动画执行)完毕才能渲染, 否则坐标都产生偏移, 如:antd的modal的动画 | number | 0 |
extraPos | 画布渲染的时候会留padding, | extraPos Prop { } | - |
sortable | 排序支持 | boolean | object | - |
linkNumLimit | 连线数量支持 | number | object | - |
checkable | 来源表,目标表是否有勾选框 | checkable Prop { } | - |
画布渲染的时候预留padding
paddingLeft | 左侧padding间距 | number | 0 |
paddingRight | 右侧padding间距 | number | 0 |
paddingTop | 顶部padding间距 | number | 0 |
paddingBottom | 底部padding间距 | number | 0 |
paddingCenter | 水平间距 | number | 150 |
nodeVerticalPadding | 节点垂直间距 | number | 10 |
rowHeight | 节点每行的高度 | number | 26 |
checkable
来源表,目标表是否有勾选框
source | 源表是否有勾选框 | boolean | false |
target | 目标表是否有勾选框 | boolean | false |
🔗API
interface columns {
title ? : string;
key: string;
width ? : number;
primaryKey: boolean
}
interface config {
delayDraw: number;
extraPos ? : {
paddingLeft ? : number,
paddingRight ? : number,
paddingTop ? : number,
paddingBottom ? : number,
paddingCenter ? : number,
},
sortable ? : boolean | {
source ? : boolean,
target ? : boolean
},
linkNumLimit ? : number | {
source ? : number,
target ? : number
},
checkable ?: {
source ? : boolean,
target ? : boolean
}
}
interface ComProps {
width ? : number | string;
height ? : number | string;
type ? : string;
className ? : string;
sourceClassName ? : string;
targetClassName ? : string;
columns: Array < columns > ;
sourceData: Array < any > | Object;
targetData: Array < any > | Object;
mappingData: Array < any > ;
emptyContent ? : string | JSX.Element;
emptyWidth ? : number | string;
isConnect?(edge: any): boolean;
onChange(data: any): void;
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来定制您需要的需求