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