gojs数据映射结合具体业务实例（包含代码和效果展示）.zip资源-CSDN文库

共7个文件

js：4个

png：2个

html：1个

前端流程图插件

gojs

数据映射实例

datamapping

拖拽连线方式

需积分: 50 188 浏览量 2019-11-14 11:46:18 上传评论 1 收藏 393KB ZIP 举报

资源详情

资源评论

收起资源包目录

gojs数据映射结合具体业务实例（包含代码和效果展示）.zip （7个子文件）

gojs数据映射结合具体业务实例

代码示例

dataMapping.html 11KB

效果截图

dataMapping效果展示01（拖拽连线定义关系）.png 87KB

dataMapping效果展示02（高亮显示）.png 41KB

需引入资源包

DrawCommandHandler.js 17KB

Arrowheads.js 8KB

Figures.js 274KB

go.v2.0.4.js 849KB

<!DOCTYPE HTML> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <meta charset="utf-8"> <head th:include="include :: header"></head> <style type="text/css"> #toolsHandleId>a { font-size: 18px; padding: 4px 4px; margin-top: 1px; margin-left: 5px; } </style> <body class="gray-bg" onload="init()"> <div class="container-div"> <input id="dmWbsInfoId" type="hidden" th:value="${dmWbsInfoId}"> <input id="upAndDownOfLinkData" type="hidden" th:value="${upAndDownOfLinkData}"> <input id="fromNodeId" type="hidden" th:value="${fromNodeId}"> <input id="toNodeId" type="hidden" th:value="${toNodeId}">  <div style="width: 100%; height:100%; display: flex; justify-content: space-between"> <div style="border: 1px solid #ccc; width: 100%; height: 100%;margin:0 auto;"> <div style="border-bottom: 1px solid #ccc; height: 40px; background: #e7eaec;"> <ul style="margin-top: 0px; margin-left: 5px;"> <li id="toolsHandleId" class="toolsHandle" style="line-height: 38px; display: inline-block; margin-right: 5px; float: left;"> <a class="" data-toggle="tooltip" data-placement="bottom" title="撤销" onclick="undo()"> <i class="fa fa-mail-reply"></i> </a> <a class="" data-toggle="tooltip" data-placement="bottom" title="恢复" onclick="redo()"> <i class="fa fa-mail-forward"></i> </a> <a class="" data-toggle="tooltip" data-placement="bottom" title="放大" onclick="zoomIn()"> <i class="fa fa-search-plus"></i> </a> <a class="" data-toggle="tooltip" data-placement="bottom" title="缩小" onclick="zoomOut()"> <i class="fa fa-search-minus"></i> </a> <a class="" data-toggle="tooltip" data-placement="bottom" title="自适应绘图区" onclick="zoomToFit()"> <i class="fa fa-expand"></i> </a> <a class="" data-toggle="tooltip" data-placement="bottom" title="导出图片" onclick="exportImage()"> <i class="fa fa-file-photo-o"></i> </a> <a class="" data-toggle="tooltip" data-placement="bottom" title="刷新" onclick="loadData()"> <i class="fa fa-refresh"></i> </a> </li> </ul> </div> <div class="" id="myDiagramDiv" style="width:100%; height: calc(100% - 40px);"></div> </div> </div> </div> <div th:include="include :: footer"></div> <script th:src="@{/ajax/libs/gojs/go.v2.0.4.js}"></script> <script th:src="@{/ajax/libs/gojs/extensions/Arrowheads.js}"></script> <script th:src="@{/ajax/libs/gojs/extensions/Figures.js}"></script> <script th:src="@{/ajax/libs/gojs/extensions/DrawCommandHandler.js}"></script> <script th:inline="javascript"> $(function() { $('[data-toggle="tooltip"]').tooltip(); }); </script> <script th:inline="javascript" id="code"> function init() { var $ = go.GraphObject.make; //for conciseness in defining templates myDiagram = $(go.Diagram, "myDiagramDiv",{ initialContentAlignment: go.Spot.Center, validCycle: go.Diagram.CycleNotDirected, // don't allow loops // For this sample, automatically show the state of the diagram's model on the page "ModelChanged": function(e) { if (e.isTransactionFinished) showModel(); }, "undoManager.isEnabled": true }); //展示节点中定义的连线点 function showFieldDataAndStyle(node, show) { node.background = show ? "dodgerblue" : null; if(node.data.flag == 1){ node.fromLinkable = true; node.toLinkable = false; }else{ node.fromLinkable = false; node.toLinkable = true; } } //fields中显示的图片 function inOutTypeImage(type){ switch (type) { case 1: return ctx+"img/para_out.png"; case 2: return ctx+"img/para_in.png"; default: return ""; } } var fieldTemplate = $(go.Panel, "TableRow", // this Panel is a row in the containing Table new go.Binding("portId", "id"),{ background: "transparent", // so this port's background can be picked by the mouse fromSpot: go.Spot.Right, // links only go from the right side to the left side toSpot: go.Spot.Left, fromLinkable: true, toLinkable: true, toMaxLinks: 1, /* fromMaxLinks: 1, */ }, { // handle mouse enter/leave events to show/hide the ports mouseEnter: function(e, node) { showFieldDataAndStyle(node, true); }, mouseLeave: function(e, node) { showFieldDataAndStyle(node, false); } }, $(go.Picture, { alignment: go.Spot.Left, //TopLeft显示的位置 width: 16, height: 16, margin: new go.Margin(0, 0) }, new go.Binding("source", "flag", inOutTypeImage) ), $(go.TextBlock,{ margin: new go.Margin(5, 5), column: 1, font: "bold 14px sans-serif", alignment: go.Spot.Left, verticalAlignment: go.Spot.Center, fromLinkable: true, toLinkable: true, minSize: new go.Size(180, 0), maxSize: new go.Size(180, 100), /* height: 25, */ wrap: go.TextBlock.WrapFit, cursor: "pointer" }, new go.Binding("text", "name")) ); //节点选中样式 var nodeSelectionAdornmentTemplate = $(go.Adornment, "Auto", $(go.Shape, { fill: null, stroke: "red", strokeWidth: 3, strokeDashArray: [4, 2] }), $(go.Placeholder) ); myDiagram.nodeTemplate = $(go.Node, "Auto", { copyable: false, deletable: false,width: 210,movable: true, }, { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate }, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), $(go.Shape,{ fill: "#f3f3f4" ,stroke: "#3587ce", strokeWidth: 1.5, }), $(go.Panel, "Vertical", $(go.Panel, "Auto",{ stretch: go.GraphObject.Horizontal }, // as wide as the whole node $(go.Shape,{ fill: "#3b87c5", stroke: "#3587ce",strokeWidth: 2, }), $(go.TextBlock,{ alignment: go.Spot.Center, margin: 3, stroke: "white", textAlign: "center", font: "bold 11pt sans-serif" }, new go.Binding("text", "keyName"))), $(go.Panel, "Table",{ padding: 2, minSize: new go.Size(100, 10), defaultStretch: go.GraphObject.Horizontal, itemTemplate: fieldTemplate, defaultRowSeparatorStroke: "#e6e5e5" }, new go.Binding("itemArray", "fields") ) ) ); myDiagram.linkTemplate = $(go.Link,{ relinkableFrom: true, relinkableTo: true, // let user reconnect links toShortLength: 4, fromShortLength: 2, corner:5, mouseEnter: function(e, link) { //此处样式可根据实际需要更改，本人实现的是鼠标移到线后高亮显示连线的源节点和目标节点 }, mouseLeave: function(e, link) { //此处样式可根据实际需要更改，本人实现的是鼠标移到线后高亮显示连线的源节点和目标节点 }, }, {contextMenu: $(go.Adornment, "Vertical", $("ContextMenuButton", $(go.TextBlock, "删除连线",{ font: "bold 10pt Segoe UI,sans-serif", minSize: new go.Size(70, 20), maxSize: new go.Size(70, 20), wrap: go.TextBlock.WrapFit, stroke: "#1c84c6", textAlign: "center", verticalAlignment: go.Spot.Center, }), { click: function(e, obj) { var node = obj.part.adornedPart; if (node !== null) { myDiagram.startTransaction("delete link "); myDiagram.allowDelete = true; myDiagram.commandHandler.deleteSelection(); myDiagram.allowDelete = false;

评论收藏

内容反馈