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

代码语言：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: 12, height: 12, column: 0, strokeWidth: 2, margin: 4,
                      // but disallow drawing links from or to this shape:
                      fromLinkable: false, toLinkable: false
                    },
                    new go.Binding("figure", "figure"),
                    new go.Binding("fill", "color")),
                  $(go.TextBlock,
                    {
                      margin: new go.Margin(0, 5), column: 1, font: "bold 13px sans-serif",
                      alignment: go.Spot.Left,
                      // and disallow drawing links from or to this text:
                      fromLinkable: false, toLinkable: false,editable: true
                    },
                    new go.Binding("text", "name")),
                    
                  $(go.TextBlock,
                    { margin: new go.Margin(0, 5), column: 2, font: "13px sans-serif", alignment: go.Spot.Left ,editable: true},
                    new go.Binding("text", "info")),

                     $("Button",{
                         
                         alignment: go.Spot.Right, 
                              width: 20,
                              height: 20,
                              margin: new go.Margin(0, 2),
                              click: function(e, obj) {
                                  var index = obj.row;
                        

                 var node = obj.panel.part;
                               console.log(  obj.part.data.fields);
                               
                               var fields = node.data.fields.slice();
                                 fields.splice(index, 1);
                                 myDiagram.startTransaction("removeFromTable");
      // remove second item of list, at index #1
     // myDiagram.model.removeArrayItem(d.people, 1);
      myDiagram.commitTransaction("removeFromTable");
          node.diagram.model.setDataProperty(node.data, "fields", fields);
                
                          return;
                                      // 获取当前按钮所在的节点
                var node = button.part;
                console.log(node)
              
                // 如果找到节点，将其从图中删除
                if (node) {
                    e.diagram.remove(node);
                }
                                
                              }
                            },
                            $(go.Shape, "MinusLine", {
                              stroke: "red",
                              strokeWidth: 1
                            }))
                );
        
              // This template represents a whole "record".
              myDiagram.nodeTemplate =
                $(go.Node, "Auto",
                  { copyable: true, deletable: true },
                  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                  // this rectangular shape surrounds the content of the node
                  $(go.Shape,
                    { fill: "#EEEEEE" }),
                  // the content consists of a header and a list of items
                  $(go.Panel, "Vertical",
                    // this is the header for the whole node
                    $(go.Panel, "Auto",
                      { stretch: go.GraphObject.Horizontal },  // as wide as the whole node
                      $(go.Shape,
                        { fill: "#1570A6", stroke: null }),
                      $(go.TextBlock,
                        {
                          alignment: go.Spot.Center,
                          margin: 3,
                          stroke: "white",
                          textAlign: "center",
                          font: "bold 12pt sans-serif",
                          editable: true
                        },
                           
                        new go.Binding("text", "key"),
                        
                       
                        
                        ),
                        
                        $("Button", 
            { row: 0, column: 1, alignment: go.Spot.Right, margin: 8, click: function(e, obj) { 
                
             var node = obj.panel.part;
                               console.log(  obj.part.data.fields);
                               
                               var fields = node.data.fields.slice();
                                 fields.push( { name: "field122", info: "the second one", color: "#F25022", figure: "Ellipse" });
        
          node.diagram.model.setDataProperty(node.data, "fields", fields);
                
                        
                      
                       
                
                
   .........完整代码请登录后点击上方下载按钮下载查看