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

1.1 预期效果

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

1.2 实现思路

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

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

2.1 准备模板

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

2.2 引用 JS

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

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

2.3 添加事件

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

JavaScript 代码如下

//逐行进行代码解释
	//此变量为设置连线格式，在进行连线时可以统一调用此格式，节省开发时间
	var common = {
		//设置连线锚点，也就是连线的起点、终点在连接对象的哪个位置
		//左边为起点位置，右边为终点位置
		anchor: ['Left', 'Right'],
		//设置锚点类型，Dot为圆形；Rectangle为矩形；其它类型请看教程
		endpoint: 'Dot',
		//设置连线格式，Stroke为颜色；strokeWidth为宽度；dashstyle为虚线，大小越小，则虚线越小越密集
		paintStyle: {
			stroke: 'green',
			strokeWidth: 1,
			dashstyle: "6"
		},
		//设置锚点格式，fill为填充方式，outlineStroke为填充颜色，outlineWidth为宽度
		//此处我将fill，outlineStroke设置为none，则不再显示锚点
		endpointStyle: {
			fill: 'none',
			outlineStroke: 'none',
			outlineWidth: 30
		},
		//设置连线方式，Straight为直线，Bezier为贝塞尔曲线，Flowchart为具有90度转折点的流程线，StateMachine为状态机
		connector: 'Straight',
		//设置箭头格式，箭头可以在一条线上布置多个，此处我布置了一个
		//width，length为宽高设置，location为位置，1为连线末端，0.5为中间
		overlays: [
			['Arrow', {
				width: 8,
				length: 8,
				location: 1
			}]
		]
	}

	//这是启动连接的方法，通过第二个参数，可以设置这组连接的各种格式
	jsPlumb.connect({
		//下方的两个参数，我填写的是Id，在FineReport中，每个单元格都有独立的Id
		//格式如下"单元格名-页面id-0"，"B4-0-0"则代表第一页的B4单元格
		//同样因为可以使用Element，所以后期的灵活性很高
		//连接起点，可以是Id，Element，也可以是使用jsPlumb自定义的endpoint对象
		source: 'B4-0-0',
		//连接终点
		target: 'D2-0-0'
	}, common)
	//下方之后都是重复第一个方法
	jsPlumb.connect({
		source: 'D2-0-0',
		target: 'F4-0-0'
	}, common)

	jsPlumb.connect({
		source: 'B4-0-0',
		target: 'D6-0-0'
	}, common)

	jsPlumb.connect({
		source: 'D6-0-0',
		target: 'F4-0-0'
	}, common)

	jsPlumb.connect({
		source: 'F4-0-0',
		target: 'B4-0-0'
	}, common)

2.4 效果预览

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

注：不支持移动端。

点击可下载模板：JS实现单元格之间连线（流程图）.cpt