jsplumb实现连线，表格之间实现批量字段映射

最新推荐文章于 2024-07-10 10:40:35 发布
最新推荐文章于 2024-07-10 10:40:35 发布
阅读量2.1k 收藏 7
点赞数
文章标签： javascript 性能优化 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmk666__/article/details/127715997
版权

jsplumb + vue2

需求分析：两个表格分别展示需要拼接的数据，通过拖拽连线建立数据绑定关系。
实现步骤：
一、渲染表格数据
二、初始化节点数据
三、绑定事件
四、获取链接关系数据
1、根据已有数据初始化连线关系
2、新增数据不改变原连线添加节点
五、优化功能三：数据量大，表格滚动，滚动时连线跟随移动

#一、渲染数据
根据你的数据渲染出表格，注意绑定唯一字段，jsplumb使用

<template>
  <div class="app-container">
    <el-row id="container" :gutter="20">
      <el-col :span="11">
        <div id="leftTable" style="display: inline-block">
          <div style="text-indent: 0px; font-size: 16px;text-align: center;margin-bottom:5px">数据对象</div>
          <table style="height: 535px; overflow: scroll; display: inline-block"  @scroll="connect">
            <thead>
              <tr>
                <th
                  v-for="col in sourceColumn"
                  :key="col.dataIndex"
                  style=" text-align: left"
                  :style="{minWidth:col.width}"
                >
                  {{ col.title }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr
              style="overflow:hidden;"
                v-for="code in sourceList"
                :id="code[sourceKey]"
                :key="code"
                name="joint"
              >
                <td
                  v-for="col in sourceColumn"
                  :key="index + col.dataIndex"
                  style="text-align: left;"
                  :style="{
                    textIndent:
                      col.dataIndex == sourceKey
                        ? code.indent * 20 + 'px'
                        : '0px',
                        minWidth:col.width,
                  }"
                >
                  {{ code[col.dataIndex] }}
                </td>
                <span
                  v-if="code.data_type != 'Object' && code.data_type != 'Array' && !code.disabled && code.dict_type"
                  style="
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    background: #ccc;
                    margin-left: -15px;
                    transform: translateY(5px);
                  "
                  :style="{transform:'translateY('+code.top + ')'}"
                >
              </span>
              </tr>
            </tbody>
          </table>
        </div>
      </el-col>
      <el-col :span="12" :offset="1">
        <div
          id="rightTable"
          style="
            height: 555px;
            overflow-y: auto;
            display: inline-block;
            position: relative;
            padding-left: 50px;
          "
          @scroll="connect"
        >
          <div
            v-for="target in targetList"
            :key="target.title"
            style="position: relative; margin-bottom: 10px"
          >
            <div style="text-indent: 15px; font-size: 16px;text-align: center;margin-bottom:5px">
              {{ target.title }}
            </div>
            <table style="margin-left: 15px">
              <thead style="width: 100%">
                <tr>
                  <th
                    v-for="col in targetColumn"
                    :key="col.dataIndex"
                    style="
                      min-width: 180px;
                      text-align: left;
                      text-indent: 40px;
                    "
                  >
                    {{ col.title }}
                  </th>
                </tr>
              </thead>
              <tbody style="width: 100%">
                <tr
                  v-for="(data, index) in target.list"
                  :key="index"
                  :id="'right' + (data[targetKey] ? data[targetKey] : data)"
                  name="data"
                  style="position: relative"
                >
                  <td
                    style="text-align: left; text-indent: 40px"
                    v-for="col in targetColumn"
                    :key="index + col.dataIndex"
                  >
                    {{ data[col.dataIndex] }}
                  </td>
                  <span
                    style="
                      display: inline-block;
                      width: 14px;
                      height: 14px;
                      border-radius: 50%;
                      background: #ccc;
                      margin-top: 5px;
                      margin-left: -0px;
                      position: absolute;
                      left: 0;
                      top: 0;
                      z-index: 999;
                    "
                  ></span>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            v-if="targetList.length == 0"
            style="
              color: #ffffff88;
              text-align: center;
              font-size: 14px;
              margin-top: 80px;
            "
          >
            请选择字典
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

#二、初始化数据节点

<script>
//局部引入
import jsPlumb from "jsplumb";
//jsplumb使用
let $jsPlumb = jsPlumb.jsPlumb;
let jsPlumb_instance = null; // 缓存实例化的jsplumb对象
export default {
  data() {
    return {
      // 左侧对照数据
      // sourceList: [
      //   { name: "表字段1" },
      //   { name: "表字段2" },
      //   { name: "表字段3" }
      // ],
      // 右侧标准字典数据
      // targetList: [
      //   { name: "表字段1" },
      //   { name: "字段2" },
      //   { name: "字段3" },
      //   { name: "字段4" }
      // ],
      pointList: null, //向后端传递的map映射关系
      diffList: [],
      count: 0
    };
  },
  props: [
    "sourceList",
    "targetList",
    "targetColumn",
    "targetKey",
    "sourceColumn",
    "sourceKey"
  ],
  mounted() {
    setTimeout(() => {
      this.showPlumb();
    }, 100);
  },
  watch: {
    targetList(newval, oldval) {
      let oldList = oldval.map((val) => val.title);
      this.diffList = newval.filter((val) => !oldList.includes(val.title));
      setTimeout(() => {
        this.showDiff();
      }, 100);
    }
  },
  methods: {
    showPlumb() {
      let self = this;
      // 清除端点、连接
      jsPlumb_instance?.reset();
      this.pointList = new Map();
      this.$forceUpdate();
      jsPlumb_instance = $jsPlumb.getInstance({
        Container: "container", // 选择器id
        EndpointStyle: { radius: 0.11, fill: "#00c1de" }, // 端点样式
        PaintStyle: { stroke: "#00c1de", strokeWidth: 4 }, // 绘画样式，默认8px线宽  #456
        HoverPaintStyle: { stroke: "#1E90FF" }, // 默认悬停样式  默认为null
        ConnectionOverlays: [
          // 此处可以设置所有箭头的样式，因为我们要改变连接线的样式，故单独配置
          // Arrow-箭头  Label-标签  PlainArrow-平头箭头  Diamond-菱形  Diamond(钻石)-钻石箭头  Custom-自定义
          //   [
          //     "Arrow",
          //     {
          //       // 设置参数可以参考中文文档
          //       location: 1,
          //       length: 8,
          //       paintStyle: {
          //         // stroke: "#409EFF",
          //         // fill: "#409EFF"
          //         fill: '#7AB02C',
          // radius: 10
          //       }
          //     }
          //   ]
        ],
        Connector: ["Straight"], // 连接器的类型：直线Straight，流程图flowchart，状态机state machine，贝塞尔曲线Bezier等 默认贝塞尔曲线
        DrapOptions: { cursor: "crosshair", zIndex: 2000 }
        //     connectorStyle:{
        //       paintStyle: {
        //     fill: '#7AB02C',
        //     radius: 10
        // },
        //     }
      });
	//调用初始化节点
      jsPlumb_instance.batch(() => {
        for (let i = 0; i < this.sourceList.length; i++) {
        //根据条件筛选哪些数据可以连接
          if (
            this.sourceList[i].data_type != "Object" &&
            this.sourceList[i].data_type != "Array" && !this.sourceList[i].disabled && this.sourceList[i].dict_type
          ) {
            this.initLeaf(this.sourceList[i][this.sourceKey], "joint");
          }
        }
        for (let j = 0; j < this.targetList.length; j++) {
          for (let i = 0; i < this.targetList[j].list.length; i++) {
            this.initLeaf(
              "right" +
                (this.targetList[j].list[i][this.targetKey] ?
                  this.targetList[j].list[i][this.targetKey] :
                  this.targetList[j].list[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, true); // 是否支持拖拽
      jsPlumb_instance.setDraggable(data, true); // 是否支持拖拽
      jsPlumb_instance.bind("dblclick", (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.sourceId, info.targetId.split("right")[1]);
        self.$emit("change", self.pointList);
      });
      // 删除连线
      jsPlumb_instance.bind("connectionDetached", function (evt) {
        if (self.pointList.has(evt.sourceId)) {
          self.pointList.delete(evt.sourceId);
          self.$emit("change", self.pointList);
        }
      });
    },
    // 初始化具体节点
    initLeaf(key, type) {
      const ins = jsPlumb_instance;
      const elem = document.getElementById(key);
      // console.log(key, elem, 99);
      if (type == "joint") {
        ins.makeSource(elem, {
          anchor: [1, 0.5, 0, 0], // 左 上 右 下
          allowLoopback: false,
          maxConnections: 1,
          endpoint: "Dot"
        });
      } else {
        ins.makeTarget(elem, {
          anchor: [0, 0.5, 0, 0],
          allowLoopback: false,
          maxConnections: 100
          // endpoint: "Dot",
          // paintStyle: {
          //   fill: "blue",
          //   strokeWidth: 1
          // }
        });
      }
    },
    initLeft() {
      for (let i = 0; i < this.sourceList.length; i++) {
        if (
          this.sourceList[i].data_type != "Object" &&
          this.sourceList[i].data_type != "Array"
        ) {
          this.initLeaf(this.sourceList[i][this.sourceKey], "joint");
        }
      }
    }
  }
};
</script>

我这里用的props的数据，可以用自己的数据，注意数据结构即可
绑定事件上面方法以实现

#四、初始化已有的连接数据及右侧数据变化时将节点渲染为可连接节点

// 初始化字典连线
    initLines () {
      this.sourceList.forEach(item => {
        if(item.dict_data){
          console.log("right" + item.dict_data_path + "__" + item.dict_data + "__" +item.dict_data_type);
          
          jsPlumb_instance.connect({
            source: item[this.sourceKey],
            target:"right" + item.dict_data_path + "__" + item.dict_data + "__" +item.data_type
          });
        }
      })
    },

遍历需要连接的数据，调用实例的connect方法连接


watch: {
    targetList(newval, oldval) {
      let oldList = oldval.map((val) => val.title);
      this.diffList = newval.filter((val) => !oldList.includes(val.title));
      setTimeout(() => {
        this.showDiff();
      }, 100);
    }
  },
methods: {
    showDiff() {
      for (let j = 0; j < this.diffList.length; j++) {
        for (let i = 0; i < this.diffList[j].list.length; i++) {
          this.initLeaf(
            "right" +
              (this.diffList[j].list[i][this.targetKey] ?
                this.diffList[j].list[i][this.targetKey] :
                this.diffList[j].list[i]),
            "data"
          );
        }
      }
    },
    }

监听数据变化，将新增的数据渲染节点

#五、页面滚动，连线跟随变化
触发滚动事件时，将现有的连接关系保存，将原有的连线删除，重新简历连线，这里设置滚动三次触发一次方法

    connect() {
      this.count++;
      if (this.count >= 3) {
        let connections = jsPlumb_instance.getAllConnections();
        let linePoints = [];
        for (let i = connections.length - 1; i >= 0; i--) {
          linePoints.push([connections[i].sourceId, connections[i].targetId]);
          jsPlumb_instance.deleteConnection(connections[i]);
        }
        for (let i = 0; i < linePoints.length; i++) {
          jsPlumb_instance.connect({
            source: linePoints[i][0],
            target: linePoints[i][1]
          });
        }
        this.count = 0;
      }
    },
dn_666666
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
JsPlump连线
yinxianluo的专栏
09-30 3088
JsPlump连线题并获取每个链接的source与target //上面的三个js文件可以直接在jsplump官网上下载网址：https://github.com/sporritt/jsplumb/    #question,#answer{float: left;width: 300px;height: 600px;border: 1px s
使用jsplumb绘图，实现连线
Delicia_Lani的博客
03-10 5072
近期有个需求，实现节点之间的连线，选用的jsplumb来绘制。 我自己在实现过程中，遇到了重绘问题/加载顺序问题/自动刷新过程中保持连线正确等很多问题，查了好多资料后，得以解决，有问题的小伙伴可以一起交流。 jsplumb涉及的几个重要网址，可以作为研发过程中的依据： jsplumb官网：https://jsplumbtoolkit.com jsplumb中文（这个中文网站列出的API还是比较完善的）：https://github.com/wangduanduan/jsplumb-chinese..
jsPlumb连线实例
07-27
简单的jsPlumb连线实例，该教程http://blog.csdn.net/zhaoxy2850/article/details/9532143中有详细说明
jsPlumb+vue创建字段映射关系
maguangcheng的博客
04-07 1408
Plunmb创建字段映射关系欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使
jsplumb库笔记
最新发布
buliang1999的博客
07-10 113
jsplumb库 流动箭头
Vue 使用jsPlumb 实现连线绘图
银滴子的博客
01-30 5557
Vue 使用jsPlumb 实现连线绘图
jsPlumb 强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等
10-28
jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大
【vue+jsPlumb】实现字段映射(数据映射)，通过手动连接创建映射关系
NIKCFNIF_66666的博客
06-22 4951
实现字段映射(数据映射)，通过手动连接给表格字段创建映射关系，jsPlumb 初始化失败，无法获取数据可使用this.$nextTick(()=>{ } )来确保dom元素渲染完毕。以及映射字段重复需要连线映射的处理，完成映射关系以map形式传给后端。 jsPlumb_instance.deleteConnection(conn);删除映射关系，jsPlumb_instance.bind("connection", function (info) {})连线回调...............
jsplumb连线的demo
04-13
jsplumb的简单demo
jsplumb实现表格字段连线_JsPlumb 动态_jsplumb_jsplumb.min.js_jsplumb拖拽生成
09-23
在这个场景中，`jsplumb`被用于实现表格字段之间的连线，这在数据库设计中非常常见，帮助用户直观地理解不同表之间的关联。 首先，让我们深入了解一下`jsplumb`的核心功能： 1. **连线创建与管理**：`jsplumb`允许...
canvas实现js、html连线
02-19
基于canvas实现js、html连线，可左右连线，也可上下连线，html连线，
许多点之间连线最短 python实现
05-02
标题中的“许多点之间连线最短 python实现”指的是在计算机科学中解决的一个经典问题，即在二维平面上找到一组点之间的最短路径网络。这个问题通常出现在图形算法、地理信息系统（GIS）或者网络优化等领域。Python...
jQuery-UI和jsPlumb实现拖拽连接模型demo下载
08-06
接下来，jsPlumb是一个JavaScript库，专门用于创建可视化连接（连线）在网页元素之间。它可以处理复杂的布局调整，例如动态添加、删除或移动连接点，以及自定义连接线的样式和行为。jsPlumb支持多种模式，包括端点...
jsPlumb开发教程（实现html5拖拽连线）
weixin_55629817的博客
11-13 1489
jsPlumb开发教程（实现html5拖拽连线）,连线、拖拽
基于jsplumb.js实现多列表一对多连线效果
sumimg的博客
11-16 2218
js写法 参考 https://juejin.cn/post/6915642997195407368 效果图 js实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&g
vue项目 - 使用jsPlumb一对多拉出映射线，并且侧栏列表使用vuedraggable拖拽变更顺序
一路踩坑，从未怕过！
08-13 942
vue项目引入插件： npm i -S vuedraggable // 拖拽 npm i jsplumb // 流程图拉线 vue页面代码： <template> <div id="wrap"> <div class="content"> <div class="row dataCont" id="module"> <div class="data dataModelBox"> <div class="
JSplumb学习笔记----获取连线内容
KentKun的博客
12-07 2672
项目中获取拓补图连线，发现两种获取方式的处理结果有所不同，在此记录下： jsplumb.getAllConnections(); //获取全部连线 jsplumb.getConnections({souce: 'sourceID', target: 'targetID'}); //获取指定连线 项目中需要获取连线，然后修改连线或删除连线，两种方式处理的结果有所不同 一、getAllConnections()： getAllConnections返回的是浅拷贝的数组，对返回的连线数组进行循环遍历时，当遍历
jsPlumb.jsAPI阅读笔记(官方文档翻译)
dianhelan5485的博客
01-24 928
jsPlumb DOCS 公司要开始做流程控制器，所以先调研下jsPlumb，下文是阅读jsPlumb提供的document所产生的归纳总结 setup 如果不使用jQuery或者类jQuery库，则传入的节点得用id的形式,否则jsPlumb会为元素设置一个id。 jsPlumb.ready(function(){ ··· }); //or jsPlumb.bind("read...
vue中能实现表格字段连线关系映射的插件有哪些
06-08
在 Vue 中实现表格字段连线关系映射的插件有很多，以下是一些常用的插件： 1. Element UI：Element UI 是一套基于 Vue.js 2.0 的桌面端组件库，其中包含了表格组件，支持表格字段映射、自定义列模板等功能。 2. Vue-Table：Vue-Table 是一个基于 Vue.js 的轻量级表格组件，支持表格字段映射、排序、分页等功能。 3. Vuetable-2：Vuetable-2 是一个基于 Vue.js 的表格组件，支持表格字段映射、自定义列模板、排序、分页等功能。 4. Vue2-datatable：Vue2-datatable 是一个基于 Vue.js 的表格组件，支持表格字段映射、排序、分页等功能。 5. vue-good-table：vue-good-table 是一个基于 Vue.js 的表格组件，支持表格字段映射、排序、分页、自定义列模板等功能。 这些插件都有详细的文档和示例，可以根据具体需求选择合适的插件。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值