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

代码语言:html

所属分类:图表

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

代码标签: 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: {
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0