【vue+jsPlumb】实现字段映射(数据映射)，通过手动连接创建映射关系

使用场景，在开发的项目中需要实现的功能是两个表单通过用户鼠标点击连线的方式来给两个表的字段做数据映射关系，点击提交把用户创建的映射关系以map的形式传给后端。当时各种百度都没找到相关的文档可以参考，后来才发现关键字搜错了，一直围绕数据映射搜索，这个功能点更准确的来说是字段映射。后来无意见看到一个博主的文档，才知道可以用jsPlumb实现，然后各种搜jsPlumb进行了解，都比较零散，所以把我这边的实现进行了一下整理

官方中文文档地址：https://github.com/wangduanduan/jsplumb-chinese-tutorial

官方文档地址:https://docs.jsplumbtoolkit.com/community/current/index.html

1，引入jsPlumb

npm install jsPlumb --save

2，在main.js中全局引入，也可局部引入

 import jsPlumb from 'jsplumb'  //可局部引入Vue.prototype.$jsPlumb = jsPlumb.jsPlumb //全局引入，挂载

3，基本元素组成

Source: 源对象。jsPlumb 通过元素的 id 属性获取对象。

Target: 目标对象。jsPlumb 通过元素的 id 属性获取对象。Source 和 Target 都可以是任何元素，区别是，Source 是起点，Target 是终点。例如，connector 中的箭头总是从 Source 指向 Target。

Anchor：锚点。是 Source 和 Target 对象上可以连接 Connector 的点。Anchor 并不是一个视觉概念，它是不可见的。

Connector: 连接线。

Endpoint: 端点。需要注意的是，箭头并不是一种端点样式，它是通过 overlay 添加的。

Overlay: 添加到连接线上的附件。例如箭头和标签。

4，节点元素

//场景  两个表格做映射关系
<template><div class="app-container"><el-row id="container" :gutter="20"><el-col :span="10"><table id="leftTable"><thead><tr><th>名称</th></tr></thead><tbody><tr v-for="(data, index) in leftTableDataList" :id="data.name"    :key="index"  name="joint"><td>{{ data.name }}</td></tr></tbody></table></el-col><el-col :span="10" :offset="4"><table id="rightTable"><thead><tr><th>名称</th></tr></thead><tbody><!-- 通过type来进行不同接口获取参数 返回数据结构不同 通过判断来进行对应展示--><!-- 通过名称来做映射关系  做映射关系的左右两边id不可重复 所以添加了right的拼接，在后续传递的数据里面进行截取就好--><tr v-for="(data, index) in rightTableDataList" :key="index":id="'right' + (data.name ? data.name : data)" name="data"><td>{{ data.name ? data.name : data }}</td></tr></tbody></table></el-col></el-row></div>
</template>

css代码

.el-card ::v-deep .el-card__body {height: calc(100vh - 170px);
}
#leftTable, #rightTable {width: 100%;margin: 15px 0;border-collapse: collapse;tr th {color: #909399;font-weight: bold;background-color: #f5f5f5;}tr th, tr td {font-size: 14px;border: 1px solid #EBEEF5;padding:10px;text-align: center;}
}

5，实例化jsPlumb

<script>
//局部引入
import jsPlumb from "jsplumb";
//jsplumb使用
let $jsPlumb = jsPlumb.jsPlumb;
let jsPlumb_instance = null; // 缓存实例化的jsplumb对象
export default {data() {return {// 左侧对照数据leftTableDataList: [{ name: "表字段1" },{ name: "表字段2" },{ name: "表字段3" },],// 右侧标准字典数据rightTableDataList: [{ name: "表字段1" },{ name: "字段2" },{ name: "字段3" },{ name: "字段4" },],pointList: null, //向后端传递的map映射关系};},methods: {showPlumb() {let self = this;// 清除端点、连接jsPlumb_instance.reset();this.pointList = new Map();this.$forceUpdate();jsPlumb_instance = $jsPlumb.getInstance({Container: "container", // 选择器idEndpointStyle: { radius: 0.11, fill: "#409EFF" }, // 端点样式PaintStyle: { stroke: "#409EFF", strokeWidth: 2 }, // 绘画样式，默认8px线宽  #456HoverPaintStyle: { stroke: "#1E90FF" }, // 默认悬停样式  默认为nullConnectionOverlays: [// 此处可以设置所有箭头的样式，因为我们要改变连接线的样式，故单独配置// Arrow-箭头  Label-标签  PlainArrow-平头箭头  Diamond-菱形  Diamond(钻石)-钻石箭头  Custom-自定义["Arrow",{// 设置参数可以参考中文文档location: 1,length: 8,paintStyle: {stroke: "#409EFF",fill: "#409EFF",},},],],Connector: ["Straight"], // 连接器的类型：直线Straight，流程图flowchart，状态机state machine，贝塞尔曲线Bezier等 默认贝塞尔曲线DrapOptions: { cursor: "crosshair", zIndex: 2000 },});jsPlumb_instance.batch(() => {for (let i = 0; i < this.leftTableDataList.length; i++) {this.initLeaf(this.leftTableDataList[i].name, "joint");}for (let i = 0; i < this.rightTableDataList.length; i++) {this.initLeaf("right"+(this.rightTableDataList[i].name?this.rightTableDataList[i].name : this.rightTableDataList[i]),"data")}})const joint = document.getElementsByName("joint");const data = document.getElementsByName("data");jsPlumb_instance.setSourceEnabled(joint, true);jsPlumb_instance.setTargetEnabled(data, true);jsPlumb_instance.setDraggable(joint, false); // 是否支持拖拽jsPlumb_instance.setDraggable(data, false); // 是否支持拖拽jsPlumb_instance.bind("click", (conn, originalEvent) => {this.$confirm("确认删除映射么?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",closeOnClickModal: false,type: "warning",}).then(() => {jsPlumb_instance.deleteConnection(conn);}).catch(() => {});});///两个表进行关联时 连线jsPlumb_instance.bind("connection", function (info) {self.pointList.set(info.targetId.split("right")[1], info.sourceId);});// 删除连线jsPlumb_instance.bind("connectionDetached", function (evt) {if (self.pointList.has(evt.targetId.split("right")[1])) {self.pointList.delete(evt.targetId.split("right")[1]);}});},// 初始化具体节点initLeaf(key, type) {const ins = jsPlumb_instance;const elem = document.getElementById(key);if (type == "joint") {ins.makeSource(elem, {anchor: [1, 0.5, 0, 0], // 左 上 右 下allowLoopback: false,maxConnections: 1,});} else {ins.makeTarget(elem, {anchor: [0, 0.5, 0, 0],allowLoopback: false,maxConnections: 1,});}},},
};
</script>

6，这里是封装了子组件，在父组件中获取数据，进行调用（如果不封装子组件可直接在mounted用调用showPlumb进行初始化）

//父组件获取数据 调用初始化 jsPlumb
//通过this.$refs.step2Child调用父组件中的方法和变量
async next() {
//校验第一步表单 进行第二步映射this.$refs.step1Child.getValid().then((res) => {await getTableData1().then((response) => {this.$refs.step2Child.rightTableDataList= response})  })await getTableData2().then((response) => {this.$nextTick(function () {this.$refs.step2Child.leftTableDataList = response //给子组件中的表单赋值this.$refs.step2Child.showPlumb(); //调用子组件中的方法进行初始化this.current++; })})  })},

注意：

因为jsPlumb 是通过DOM进行工作的，所以我们需要把jsPlumb初始化放在mounted声明，
如果是在子组件中完成，需要保证子组件渲染完成才可进行处理，可以放在进行初始化this.$nextTick(()=>{ } )

【vue+jsPlumb】实现字段映射(数据映射)，通过手动连接创建映射关系相关推荐

R语言使用dplyr包的full_join函数基于多个字段（数据列）全连接两个dataframe、按照多列对数据进行全连接
R语言使用dplyr包的full_join函数基于多个字段(数据列)全连接两个dataframe.按照多列对数据进行全连接目录
elasticsearch映射相关字段定义，属性定义，及动态映射（marvel插件方式）mapping
1.什么是Mapping映射? 映射:创建索引的时候,可以预先定义字段的类型及相关属性作用:这样会让索引建立的更加的细致和完善分类:静态映射和动态映射 Type ES type Descripti ...
如何在Tableau中的县级上映射数据
地理空间数据可视化(Geospatial Data Visualization) 总览(Overview) The geography of counties and county-level equ ...
vue+jsplumb 实现根据数据渲染出连线绘图
vue+jsplumb 实现根据数据渲染出连线绘图 jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素.在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以 ...
四十四、ETL工具的查询_连接和映射
1. ETL工具Kettle的查询.连接和映射在ETL工具中,查询.连接和映射各自的作用包括: 查询步骤:用来查询数据源中的数据并合并到主数据流中连接步骤:将结果集合通过关键字进行连接子转换/映 ...
使用阿里巴巴json映射_使用JSON模式验证来映射稀疏JSON
使用阿里巴巴json映射在本文中,我们将探讨在创建和共享API时出现的问题. 特别是,需要: 表达数据的结构提供对该数据的验证允许将来改变主意通过您拥有的部分数据与客户进行沟通缺少数据时填写 ...
[python教程入门学习]Python标准库映射类型与可散列数据类型的关系
本文章向大家介绍Python标准库映射类型与可散列数据类型的关系,主要包括Python标准库映射类型与可散列数据类型的关系使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋 ...
win7映射网络驱动器消失了_win7怎么映射网络驱动器|win7设置网络驱动器的方法...
2015-08-21 15:57:15 近来,有一些刚刚升级windows10系统的用户向小编咨询在新系统中该如何创建映射网络驱动器.其实,方法非常简单,接下来,小编就向大家分享win10系统创建映射 ...
react 和 vue(组件化) 实现两份数据的差异对比合并及撤销
百度链接 react 链接: https://pan.baidu.com/s/12qewDxDSGiEiV650UX5QWw?pwd=myf2 提取码: myf2 百度链接 vue 已实现为组件传 ...

【vue+jsPlumb】实现字段映射(数据映射)，通过手动连接创建映射关系

【vue+jsPlumb】实现字段映射(数据映射)，通过手动连接创建映射关系相关推荐

最新文章

热门文章