gojs实现可编辑文字和节点增删改的思维导图效果代码-html代码-BFW代码库

gojs实现可编辑文字和节点增删改的思维导图效果代码

代码语言：html

所属分类：图表

代码描述：gojs实现可编辑文字和节点增删改的思维导图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap");

html {
  font-family: "Open Sans", sans-serif;
  /*   font-family: 'Roboto', sans-serif; */
}
.viewport {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.model-toolbar {
  margin-bottom: 1rem;  
}

#diagramModel {
  width:100%;
  height:80vh;
  background-color: #3a3a3a;
  color: #00FF41;
}
</style>


  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
  
</head>

<body >
  

<div class="viewport col-10 offset-1">



  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:300px;"></div>

  <br />
  <p>
    When a node is deleted the <a>CommandHandler.deletesTree</a> property ensures that
    all of its children are deleted with it. When a node is dragged the <a>DraggingTool.dragsTree</a>
    property ensures that all its children are dragged with it.
    Both of these are set during the the Diagram's initalization.
  </p>
  <p>
    Node templates also have a <a>Part.selectionAdornmentTemplate</a> defined to allow for new nodes to be created and a <a>GraphObject.contextMenu</a> with additional commands.
  </p>

  <div class="model-toolbar btn-group btn-group-toggle" data-toggle="buttons">
    <button class="btn btn-success" id="SaveButton" onclick="save()">Save</button>
    <button class="btn btn-primary" onclick="load()">Load</button>
    <button disabled class="btn btn-light" onclick="layoutAll()">Layout</button>
    <button class="btn btn-info" onclick="prettyPrint()">Pretty Print</button>
  </div>

  <br />
  <textarea id="diagramModel" class="form-control shadow">
{ "class": "go.TreeModel",
  "nodeDataArray": [
{"key":0, "text":"Mind Map", "loc":"0 0"},
{"key":1, "parent":0, "text":"Getting more time", "brush":"skyblue", "dir":"right", "loc":"77 -22"},
{"key":11, "parent":1, "text":"Wake up early", "brush":"skyblue", "dir":"right", "loc":"200 -48"},
{"key":12, "parent":1, "text":"Delegate", "brush":"skyblue", "dir":"right", "loc":"200 -22".........完整代码请登录后点击上方下载按钮下载查看