Skip to content

noonnightstorm/react-field-mapping

 
 

Repository files navigation

react-field-mapping

npm version download gzip size license

关系映射组件

View the Demo and its source for more.

使用中需要注意的一点是relation,是由组件内部控制的,所以是不受控的,连线后组件内部relation改变,连线也是组件内部控制。但是外部传入的relation是可以改变内部的relation,在组件内会监听传入的relation,可以在onChange的时候改变传入的relation,来达到受控的效果,如果onChange的时候不改变传入的relation,那么relation就是defaultRelation的效果。

API

FieldMapping

参数 说明 类型 默认值
className 自定义class string ""
style 自定义style object {}
source data 源表数据(受控) array []
columns 表格列的配置描述,具体项见下表 ColumnProps[] []
onChange 表数据change监听,目前只有sort会触发,且开启sort时必须同步源表数据后,sort才会生效 function (sourceData) => {}
mutiple 是否允许一个source连接多个target boolean false
target data 目标表数据(受控) array []
columns 表格列的配置描述,具体项见下表 ColumnProps[] []
onChange 表数据change监听,目前只有sort会触发,且开启sort时必须同步目标表数据后,sort才会生效 function (sourceData) => {}
mutiple 是否允许多个source连接一个target boolean false
isSort 是否开启字段排序 boolean false
edit 线条是否可以拖动/删除(如果需要预览态,isSort不能为true) boolean true
relation 映射数据(不受控,但是不等同default,可以update) array[{source:{name,type}, target:{name,type}}] []
onChange 关联变化监听 function(relation) -
onDrawStart 开始关联监听 function(source, relation) -
onDrawing 关联进行中监听 object -
onDrawEnd 关联结束监听 function(source, relation) -
closeIcon 关闭线条的icon url string -

Column

列描述数据对象,是 columns 中的一项,Column 使用相同的 API。
参数 说明 类型 默认值
align 设置列的对齐方式 'left' | 'right' | 'center' ‘left
key 列数据在数据项中对应的 key string
render 生成复杂数据的渲染函数,参数分别为当前行的值 Function(text, record, index) {} | string | Element
title 列头显示文字 string
width 列宽度 string '100px'

About

基于React的表格映射关系组件

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 68.1%
  • TypeScript 22.7%
  • JavaScript 6.3%
  • Less 2.9%