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

代码语言：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 information
                    var child = it.value;
                    var bossText = child.findObject("boss"); // since the boss TextBlock is named, we can access it by name
                    if (bossText === null) return;
                    bossText.text = "";
                  }
                } else if (part instanceof go.Link) {
                  var child = part.toNode;
                  var bossText = child.findObject("boss"); // since the boss TextBlock is named, we can access it by name
                  if (bossText === null) return;
                  bossText.text = "";
                }
                myDiagram.commitTransaction("clear boss");
              });
        
              var levelColors = ["#AC193D", "#2672EC", "#8C0095", "#5133AB",
                "#008299", "#D24726", "#008A00", "#094AB2"];
        
              // override TreeLayout.commitNodes to also modify the background brush based on the tree depth level
              myDiagram.layout.commitNodes = function() {
                go.TreeLayout.prototype.commitNodes.call(myDiagram.layout);  // do the standard behavior
                // then go through all of the vertexes and set their corresponding node's Shape.fill
                // to a brush dependent on the TreeVertex.level value
                myDiagram.layout.network.vertexes.each(v => {
                  if (v.node) {
                    var level = v.level % (levelColors.length);
                    var color = levelColors[level];
                    var shape = v.node.findObject("SHAPE");
                    if (shape) shape.stroke = $(go.Brush, "Linear", { 0: color, 1: go.Brush.lightenBy(color, 0.05), start: go.Spot.Left, end: go.Spot.Right });
                  }
                });
              };
        
              // when a node is double-clicked, add a child to it
              function nodeDoubleClick(e, obj) {
                var clicked = obj.part;
                if (clicked !== null) {
                  var thisemp = clicked.data;
                  myDiagram.startTransaction("add employee");
                  var newemp = {
                    name: "(new person)",
                    title: "",
                    comments: "",
                    parent: thisemp.key
                  };
                  myDiagram.model.addNodeData(newemp);
                  myDiagram.commitTransaction("add employee");
                }
              }
        
              // this is used to determine feedback during drags
              function mayWorkFor(node1, node2) {
                if (!(node1 instanceof go.Node)) return false;  // must be a Node
                if (node1 === node2) return false;  // cannot work for yourself
                if (node2.isInTreeOf(node1)) return false;  // cannot work for someone who works for you
                return true;
              }
        
              // This function provides a common style for most of the TextBlocks.
              // Some of these values may be overridden in a particular TextBlock.
              function textStyle() {
                return { font: "9pt  Segoe UI,sans-serif", stroke: "white" };
              }
        
              // This converter is used by the Picture.
              function findHeadShot(key) {
                if (key < 0 || key > 16) return "images/HSnopic.jpg"; // There are only 16 images on the server
                return "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
              }
        
              // define the Node template
              myDiagram.nodeTemplate =
                $(go.Node, "Auto",
                  { doubleClick: nodeDoubleClick },
                  { // handle dragging a Node onto a Node to (maybe) change the reporting relationship
                    mouseDragEnter: (e, node, prev) => {
                      var diagram = node.diagram;
                      var selnode = diagram.selection.first();
                      if (!mayWorkFor(selnode, node)) return;
                      var shape = node.findObject("SHAPE");
                      if (shape) {
                        shape._prevFill = shape.fill;  // remember the original brush
                        shape.fill = "darkred";
                      }
                    },
                    mouseDragLeave: (e, node, next) => {
                      var shape = node.findObject("SHAPE");
                      if (shape && shape._prevFill) {
                        shape.fill = shape._prevFill;  // restore the original brush
                      }
                    },
                    mouseDrop: (e, node) => {
                      var diagram = node.diagram;
                      var selnode = diagram.selection.first();  // assume just one Node in selection
                      if (mayWorkFor(selnode, node)) {
                        // find any existing link into the selected node
                        var link = selnode.findTreeParentLink();
                        if (link !== null) {  // reconnect any existing link
                          link.fromNode = node;
                        } else {  // else create a new link
                          diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
                        }
                      }
                    }
                  },
                  // for sorting, have the Node.text be the data.name
                  new go.Binding("text", "name"),
                  // bind the Part.layerName to control the Node's layer depending on whether it isSelected
                  new go.Binding("layerName", "isSelected", sel => sel ? "Foreground" : "").ofObject(),
                  // define the node's outer shape
                  $(go.Shape, "Rectangle",
                    {
                      name: "SHAPE", fill: "#333333", stroke: 'white', strokeWidth: 3.5,
                      // set the port properties:
                      portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
                    }),
                  $(go.Panel, "Horizontal",
                    $(go.Picture,
                      {
                        name: "Picture",
                        desiredSize: new go.Size(70, 70),
                        margin: 1.5,
                      },
                      new go.Binding("source", "key", findHeadShot)),
                    // define the panel where the text will appear
                    $(go.Panel, "Table",
                      {
                        minSize: new go.Size(130, NaN),
                        maxSize: new go.Size(150, NaN),
                        margin: new go.Margin(6, 10, 0, 6),
                        defaultAlignment: go.Spot.Left
                      },
                      $(go.RowColumnDefinition, { column: 2, width: 4 }),
                      $(go.TextBlock, textStyle(),  // the name
                        {
                          row: 0, column: 0, columnSpan: 5,
                          font: "12pt Segoe UI,sans-serif",
                          editable: true, isMultiline: false,
                          minSize: new go.Size(10, 16)
                        },
                        new go.Binding("text", "name").makeTwoWay()),
                      $(go.TextBlock, "Title: ", textStyle(),
                        { row: 1, column: 0 }),
                      $(go.TextBlock, textStyle(),
                        {
                          row: 1, column: 1, columnSpan: 4,
                          editable: true, isMultiline: false,
                          minSize: new go.Size(10, 14),
                          margin: new go.Margin(0, 0, 0, 3)
                        },
                        new go.Binding("text", "title").makeTwoWay()),
                      $(go.TextBlock, textStyle(),
                        { row: 2, column: 0 },
            .........完整代码请登录后点击上方下载按钮下载查看