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

代码语言:html

所属分类:图表

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

代码标签: gojs 数据库 uml 模型 设计 编辑

下面为部分代码预览,完整代码请点击下载或在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" },
                         
                        ],
                      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0