1、GOJS的浏览器兼容问题
Chrome 3+ Firefox2+ Safari3.2+ Opera9+ IE5.5+
2、 版权
gojs是一款基于canvas的图形库，是由Northwoods公司开发的商用javascript插件，可以基于项目的不同需求实现具有交互性的各类图表，比如流程图，树图，关系图，力导图等等。
（1）解决画布水印问题
参考链接：（https://blog.csdn.net/affordlove/article/details/115549765）
//搜索 String.fromCharCode(a.charCodeAt(g)^b[(b[c]+b[d])%256])，这段代码后面会有个return f
//在return f 前添加如下代码，则成功去除水印。
if(f.indexOf('GoJS 2.1 evaluation')>-1
|| f.indexOf('(c) 1998-2021 Northwoods Software')>-1
|| f.indexOf('Not for distribution or production use')>-1
|| f.indexOf('gojs.net')>-1
){
return '';
}else{
return f
}3、滚动表格的样式修改
最终效果图如下：
代码如下：
可以实现动态显示表格的内容，通过后端接口去获得值，将值分别赋值给两个表格的item,数据格式可以参考下例中的itm1和item2；
<body style="background-color: #deecfc">
<div id="sample">
<div
style="
width: 50%;
height: 520px;
background-color: #fff;
margin: 0 auto;
border: 1px solid #fff;
"
>
<!--先准备一个容器-->
<div
id="myDiagramDiv"
style="
width: 98%;
height: 500px;
background-color: #deecfc;
margin: 10px auto;
"
></div>
</div>
<div>
<div style="width: 50%; height: 520px; margin: 0 auto">
<button id="SaveButton" onclick="save()">Save</button>
<button onclick="load()">Load</button>
</div>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!--引入GoJS插件包里的release/go.js-->
<script src="./go.js"></script>
<!--引入滚动表格的JS-->
<script src="./ScrollingTable.js"></script>
<script id="code">
//测试：定义数组item1,将变量item1赋值给表格1的items
var item1 = [
//设置表头，不给id值就可以实现不能拉线的效果
{
name: "参数名称",
value: "模式",
type: "数据类型",
color: "#bcccdf",
figure: "Ellipse",
},
{
id: "123",
name: "参数一参数名称参数名称参数名称参数名称参数名称参数名称",
value: 1,
type: "File",
color: "#0561ca",
figure: "Ellipse",
},
{
id: "456",
name: "参数二",
value: 2,
type: "File",
color: "#0561ca",
figure: "Ellipse",
},
{
id: "789",
name: "参数三",
value: 3,
type: "Date",
color: "#0561ca",
figure: "Ellipse",
},
{
id: "147",
name: "参数四",
value: 4,
type: "File",
color: "#0561ca",
figure: "Ellipse",
},
{
id: "258",
name: "参数五",
value: 5,
type: "Date",
color: "#0561ca",
figure: "Ellipse",
},
];
var item2 = [
{
name: "参数名称",
value: "模式",
type: "数据类型",
color: "#bcccdf",
figure: "Ellipse",
},
{
id: "asd",
name: "参数Aa",
value: 1,
type: "Date",
color: "#0561ca",
figure: "Ellipse",
},
{
id: "qwe",
name: "参数Bb",
value: 2,
type: "File",
color: "#0561ca",
figure: "Ellipse",
},
{
id: "zxc",
name: "参数Cc",
value: 3,
type: "Number",
color: "#0561ca",
figure: "Ellipse",
},
{
id: "rty",
name: "参数Dd",
value: 4,
type: "File",
color: "#0561ca",
figure: "Ellipse",
},
{
id: "dfg",
name: "参数Ee",
value: 5,
type: "Number",
color: "#0561ca",
figure: "Ellipse",
},
];
function init() {
// init for these samples
var $ = go.GraphObject.make; //构建GoJS对象
myDiagram = $(go.Diagram, "myDiagramDiv", {
// 允许使用撤回和redo
"undoManager.isEnabled": true,
//不允许使用复制
allowCopy: false,
//不允许移动对象
allowMove: false,
allowZoom: false,
//不允许水平滚动
allowHorizontalScroll: true,
//不允许垂直滚动
allowVerticalScroll: false,
//不允许放大缩小，需要按住ctrl键
allowZoom: false,
PartResized: function (e) {
var node = e.subject;
var scroller = node.findObject("SCROLLER");
if (scroller !== null)
scroller._updateScrollBar(scroller.findObject("TABLE"));
},
});
myDiagram.nodeTemplate = $(
go.Node,
"Vertical",
{
selectionObjectName: "SCROLLER",
resizable: true,
resizeObjectName: "SCROLLER",
portSpreading: go.Node.SpreadingNone,
},
new go.Binding("location").makeTwoWay(),
$(
go.Panel,
"Auto",
$(go.Shape, { fill: "white" }),
//节点形状和背景颜色的设置
$(
"ScrollingTable",
{
name: "SCROLLER",
desiredSize: new go.Size(NaN, 80), // fixed width
stretch: go.GraphObject.Fill, // but stretches vertically
defaultColumnSeparatorStroke: "#e6e6e6",
defaultColumnSeparatorStrokeWidth: 0.5,
},
new go.Binding("TABLE.itemArray", "items"),
new go.Binding("TABLE.column", "left", function (left) {
return left ? 2 : 0;
}),
new go.Binding("desiredSize", "size").makeTwoWay(),
{
"TABLE.itemTemplate": $(
go.Panel,
"TableRow",
{
defaultStretch: go.GraphObject.Horizontal,
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides,
fromLinkable: true,
toLinkable: true,
},
//设置动态连线通过什么连接，本示例中是通过id值连线；
new go.Binding("portId", "id"),
//设置第一列前面的小蓝点
$(
go.Shape,
{
width: 5,
height: 5,
column: 0,
strokeWidth: 0,
margin: 8,
alignment: go.Spot.Left,
// but disallow drawing links from or to this shape:
fromLinkable: false,
toLinkable: false,
},
new go.Binding("figure", "figure"),
new go.Binding("fill", "color")
),
$(
go.TextBlock, //设置文本
{ column: 0 },
{ stroke: "#2853b6", margin: new go.Margin(6, 0, 6, 15) },
//第一列：此处的text属性和模型数据的name属性之间存在数据绑定
new go.Binding("text", "name")
),
$(
go.TextBlock,
{ column: 1 },
{ stroke: "#2853b6", margin: new go.Margin(6, 0, 6, 15) },
//第二列：此处的text属性和模型数据的value属性之间存在数据绑定
new go.Binding("text", "value")
),
$(
go.TextBlock,
{ column: 2 },
{ stroke: "#2853b6", margin: new go.Margin(6, 0, 6, 15) },
//第三列：此处的text属性和模型数据的type属性之间存在数据绑定
new go.Binding("text", "type")
)
),
//设置表格的默认边框颜色（stroke）和边框宽度（strokeWidth）
"TABLE.defaultColumnSeparatorStroke": "#e6e6e6",
"TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
"TABLE.defaultRowSeparatorStroke": "#e6e6e6",
"TABLE.defaultRowSeparatorStrokeWidth": 0.5,
"TABLE.defaultSeparatorPadding": new go.Margin(3, 3, 3, 3),
}
)
)
);
//链接线的宽度颜色设置
myDiagram.linkTemplate = $(
go.Link,
$(go.Shape, { strokeWidth: 1.5, stroke: "#33A7EB" }), // 线的宽度和笔画的颜色
// 箭头颜色宽度设置
$(go.Shape, {
toArrow: "Standard",
fill: "#33A7EB",
stroke: "#33A7EB",
})
);
myDiagram.model = $(go.GraphLinksModel, {
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: [
{
key: "表格1",
left: true,
location: new go.Point(-300, 0),
size: new go.Size(285, 300),
items: item1,
},
{
key: "表格2",
location: new go.Point(150, 0),
size: new go.Size(285, 300),
items: item2,
},
],
//动态连线的实现就是通过linkDataArray赋值的
linkDataArray: [
{
from: "表格1",
fromPort: "456",
to: "表格2",
toPort: "qwe",
},
{
from: "表格1",
fromPort: "123",
to: "表格2",
toPort: "asd",
},
{
from: "表格1",
fromPort: "789",
to: "表格2",
toPort: "asd",
},
],
});
}
//添加监听线生成事件
myDiagram.addDiagramListener("LinkDrawn", function (e) {
console.log(e.subject.data.fromPort); //输出左边连线时的id值
console.log(e.subject.data.toPort); //输出右边连线时的id值
});
//保存事件，保存当前画布上的修改，将值保存在window.data里
function save() {
window.data;
window.data = myDiagram.model.toJson(); //获取当前画布的json
myDiagram.isModified = true;
console.log(window.data);
alert("保存成功");
}
//加载事件，将window.data值加载到当前画布上
function load() {
//加载json刷新画布
if (window.data) {
myDiagram.model = go.Model.fromJson(JSON.parse(window.data));
} else {
alert("还没有保存数据哦！");
}
}
// 在dom加载完成之后调用init事件
window.addEventListener("DOMContentLoaded", init);
</script>
</body>ScrollingTable.js代码修改如下：
return $(
go.Panel,
"Table",
{
_updateScrollBar: updateScrollBar,
},
// this actually holds the item elements
$(
go.Panel,
"Table",
{
name: tablename,
column: 0,
stretch: go.GraphObject.Fill,
background: "#fff",
rowSizing: go.RowColumnDefinition.Default,
defaultAlignment: go.Spot.Top,
},
//设置第一行（表头）样式
$(go.RowColumnDefinition, {
row: 0,
separatorStrokeWidth: 1.5,
separatorStroke: "#aab3c1",
background: "#bcccdf",
separatorPadding: new go.Margin(8, 3, 5, 3),
}),
//设置第er行样式
$(go.RowColumnDefinition, {
row: 1,
separatorStrokeWidth: 1.5,
separatorStroke: "#f5f5f5",
background: "#f5f5f5",
separatorPadding: new go.Margin(8, 3, 5, 3),
}),
//设置第一列样式
$(go.RowColumnDefinition, {
column: 0,
width: "100",
separatorStrokeWidth: 1.5,
}),
//设置第二列样式
$(go.RowColumnDefinition, {
column: 1,
width: "50",
separatorStrokeWidth: 1.5,
}),
//设置第三列样式
$(go.RowColumnDefinition, {
column: 2,
width: "100",
separatorStrokeWidth: 1.5,
})
),
扫一扫
2786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
