gojs实现一个可编辑可拖动的公司组织架构图表效果代码-html代码-BFW代码库

gojs实现一个可编辑可拖动的公司组织架构图表效果代码

代码语言：html

所属分类：图表

代码描述：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.........完整代码请登录后点击上方下载按钮下载查看