JS实现单元格之间连线（流程图）

1. 概述
1.1 预期效果

报表设计中，要实现单元格之间进行连线，类似流程图图之间的连线，如下图所示：

1.2 实现思路

通过开源的 JS实现：jsplumb可以实现在页面对象之间进行连线的功能。可以自定义连线样式，锚点位置，也提供了页面交互的功能。

通过 JS 将图中所示的四个单元格进行连接：

2. 示例

2.1 准备模板

新建模板，如下图所示，在单元格四个位置添加内容，并可以设置边框等格式。如下图所示：

2.2 引用 JS

在「模板>模板Web属性>引用JavaScript」,输入绝对路径，点击测试连接，连接成功后点击「添加」。如下图所示：

绝对路径为：https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js

2.3 添加事件

点击菜单栏「模板>模板Web属性>填报页面设置」,选择「为该模板单独设置」，添加一个「加载结束事件」。如下图所示：

JavaScript 代码如下：

1. //逐行进行代码解释
   
2.         //此变量为设置连线格式，在进行连线时可以统一调用此格式，节省开发时间
   
3.         var common = {
   
4.                 //设置连线锚点，也就是连线的起点、终点在连接对象的哪个位置
   
5.                 //左边为起点位置，右边为终点位置
   
6.                 anchor: ['Left', 'Right'],
   
7.                 //设置锚点类型，Dot为圆形；Rectangle为矩形；其它类型请看教程
   
8.                 endpoint: 'Dot',
   
9.                 //设置连线格式，Stroke为颜色；strokeWidth为宽度；dashstyle为虚线，大小越小，则虚线越小越密集
   
10.                 paintStyle: {
    
11.                         stroke: 'green',
    
12.                         strokeWidth: 1,
    
13.                         dashstyle: "6"
    
14.                 },
    
15.                 //设置锚点格式，fill为填充方式，outlineStroke为填充颜色，outlineWidth为宽度
    
16.                 //此处我将fill，outlineStroke设置为none，则不再显示锚点
    
17.                 endpointStyle: {
    
18.                         fill: 'none',
    
19.                         outlineStroke: 'none',
    
20.                         outlineWidth: 30
    
21.                 },
    
22.                 //设置连线方式，Straight为直线，Bezier为贝塞尔曲线，Flowchart为具有90度转折点的流程线，StateMachine为状态机
    
23.                 connector: 'Straight',
    
24.                 //设置箭头格式，箭头可以在一条线上布置多个，此处我布置了一个
    
25.                 //width，length为宽高设置，location为位置，1为连线末端，0.5为中间
    
26.                 overlays: [
    
27.                         ['Arrow', {
    
28.                                 width: 8,
    
29.                                 length: 8,
    
30.                                 location: 1
    
31.                         }]
    
32.                 ]
    
33.         }
    
34. 
    
35.         //这是启动连接的方法，通过第二个参数，可以设置这组连接的各种格式
    
36.         jsPlumb.connect({
    
37.                 //下方的两个参数，我填写的是Id，在FineReport中，每个单元格都有独立的Id
    
38.                 //格式如下"单元格名-页面id-0"，"B4-0-0"则代表第一页的B4单元格
    
39.                 //同样因为可以使用Element，所以后期的灵活性很高
    
40.                 //连接起点，可以是Id，Element，也可以是使用jsPlumb自定义的endpoint对象
    
41.                 source: 'B4-0-0',
    
42.                 //连接终点
    
43.                 target: 'D2-0-0'
    
44.         }, common)
    
45.         //下方之后都是重复第一个方法
    
46.         jsPlumb.connect({
    
47.                 source: 'D2-0-0',
    
48.                 target: 'F4-0-0'
    
49.         }, common)
    
50. 
    
51.         jsPlumb.connect({
    
52.                 source: 'B4-0-0',
    
53.                 target: 'D6-0-0'
    
54.         }, common)
    
55. 
    
56.         jsPlumb.connect({
    
57.                 source: 'D6-0-0',
    
58.                 target: 'F4-0-0'
    
59.         }, common)
    
60. 
    
61.         jsPlumb.connect({
    
62.                 source: 'F4-0-0',
    
63.                 target: 'B4-0-0'
    
64.         }, common)

复制代码

2.4 效果预览

保存模板，点击「填报预览」，效果如下图所示：

注：不支持移动端。

3. 模板下载

点击可下载模板： JS实现单元格之间连线（流程图）.cpt (5.65 KB, 下载次数: 68)

2021-4-28 14:15 上传

点击文件名下载附件

==！ 666

赞赞

我的天呐！js限制了我的想象！！666

添加查询条件之后，流程图线条都不见了  有办法解决么