gojs实现一个可编辑可拖动的公司组织架构图表效果代码
代码语言:html
所属分类:图表
代码描述:gojs实现一个可编辑可拖动的公司组织架构图表效果代码
代码标签: gojs 可编辑 可拖动 公司 组织 架构 图表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script> <div id="allSampleContent" class="p-4 w-full"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/DataInspector.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DataInspector.min.js"></script> <script id="code"> function init() { // Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make // For details, see https://gojs.net/latest/intro/buildingObjects.html const $ = go.GraphObject.make; // for conciseness in defining templates myDiagram = $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div { maxSelectionCount: 1, // users can select only one part at a time validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees "clickCreatingTool.archetypeNodeData": { // allow double-click in background to create a new node name: "(new person)", title: "", comments: "" }, "clickCreatingTool.insertPart": function(loc) { // override to scroll to the new node var node = go.ClickCreatingTool.prototype.insertPart.call(this, loc); if (node !== null) { this.diagram.select(node); this.diagram.commandHandler.scrollToPart(node); this.diagram.commandHandler.editTextBlock(node.findObject("NAMETB")); } return node; }, layout: $(go.TreeLayout, { treeStyle: go.TreeLayout.StyleLastParents, arrangement: go.TreeLayout.ArrangementHorizontal, // properties for most of the tree: angle: 90, layerSpacing: 35, // properties for the "last parents": alternateAngle: 90, alternateLayerSpacing: 35, alternateAlignment: go.TreeLayout.AlignmentBus, alternateNodeSpacing: 20 }), "undoManager.isEnabled": true // enable undo & redo }); // when the document is modified, add a "*" to the title and enable the "Save" button myDiagram.addDiagramListener("Modified", e => { var button = document.getElementById("SaveButton"); if (button) button.disabled = !myDiagram.isModified; var idx = document.title.indexOf("*"); if (myDiagram.isModified) { if (idx < 0) document.title += "*"; } else { if (idx >= 0) document.title = document.title.slice(0, idx); } }); // manage boss info manually when a node or link is deleted from the diagram myDiagram.addDiagramListener("SelectionDeleting", e => { var part = e.subject.first(); // e.subject is the myDiagram.selection collection, // so we'll get the first since we know we only have one selection myDiagram.startTransaction("clear boss"); if (part instanceof go.Node) { var it = part.findTreeChildrenNodes(); // find all child nodes while (it.next()) { // now iterate through them and clear out the boss i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0