joint+handsontable实现两张电子表格连线关联代码-html代码-BFW代码库

joint+handsontable实现两张电子表格连线关联代码

代码语言：html

所属分类：图表

代码描述：joint+handsontable实现两张电子表格连线关联代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/joint.3.7.2.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/handsontable.full.min.css">
<style>
#paper {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

#logo {
  position: absolute;
  bottom: 25px;
  right: 25px;
}

.joint-highlighted {
  stroke: #5a87f7;
  stroke-width: 3;
}
.joint-highlighted.label rect {
  fill: #e9effe;
  stroke: #5a87f7;
}
.joint-highlighted.label text {
  stroke: none;
}

.handsontable .table-header {
  background: #fcfdc4;
}
</style>

  
</head>

<body translate="no">
  <div id="paper"></div>

  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/rappid.3.7.3.css">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/joint.3.7.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/handsontable.full.js"></script>
      <script >
const {
    dia,
    shapes,
    highlighters,
    util,
    linkTools,
} = joint;

const HotModel = dia.Element.define('HotModel', {
    size: {
        width: 300,
        height: 0
    },
    z: 1,
    data: null,
    ports: {
        groups: {
            top: {
                z: 0,
                position: {
                    name: 'line',
                    args: {
                        start: {
                            x: 50,
                            y: -15
                        },
                        end: {
                            x: 'calc(w)',
                            y: -15
                        }
                    }
                },
                markup: util.svg/*xml*/`
                      <line @selector="portLine" x1="0" y1="0" x2="0" y2="30" stroke="#131e29" stroke-width="2"/>
                      <rect @selector="portBody" magnet="true" x="-5" y="-5" width="10" height="10" stroke="#131e29" stroke-width="2" fill="white" />
                  `
            }
        }
    }
});

const HotFlags = {
    // RenderView is used to render the adaptive card inside the foreign object
    RenderView: '@render-view',
    // UpdateView is used to update the size of the foreign object
    // and the color of border
    UpdateView: '@update-view',
    // TransformView is used to position and rotate the view
    TransformView: '@transform-view',
    // MeasureView is used to measure the view and update
    // the size of the model
    MeasureView: '@measure-view'
};

const HotModelView = dia.ElementView.extend({

    // The root of the element view is the <g> element by default.
    tagName: 'g',

    HEADER_HEIGHT: 30,
    COL_WIDTH: 50,

    // Whenever the model attributes change (the map key is the attribute name),
    // the update() method will be c.........完整代码请登录后点击上方下载按钮下载查看