gojs实现数据库表uml模型设计编辑效果代码-html代码-BFW代码库

gojs实现数据库表uml模型设计编辑效果代码

代码语言：html

所属分类：图表

代码描述：gojs实现数据库表uml模型设计编辑效果代码，在空白出双击可添加新表，可增加字段、修改字段、修改表名，删除表等操作，还可对表之间的字段进行连线join操作，最终生成json数据。

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

<!DOCTYPE html>
<html>

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

<body>
    <script src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
    <div id="allSampleContent" class="p-4 w-full">
        <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",
                  {
                    validCycle: go.Diagram.CycleNotDirected,  // don't allow loops
                    // For this sample, automatically show the state of the diagram's model on the page
                    "ModelChanged": e => {
                      if (e.isTransactionFinished) showModel();
                    },
                    "undoManager.isEnabled": true,
                    "clickCreatingTool.archetypeNodeData": {
                        key: "新表",
                        fields: [
                          { name: "id", info: "", color: "#F7B84B", figure: "Ellipse" },
                         
                        ],
                        loc: "0 0"
                      }
        
                  });
        
              // This template is a Panel that is used to represent each item in a Panel.itemArray.
              // The Panel is data bound to the item object.
              var fieldTemplate =
                $(go.Panel, "TableRow",  // this Panel is a row in the containing Table
                
                  new go.Binding("portId", "name"),  // this Panel is a "port"
                  {
                    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,
                    // allow drawing links from or to this port:
                    fromLinkable: true, toLinkable: true
                  },
                  $(go.Shape,
                    {
                      width.........完整代码请登录后点击上方下载按钮下载查看