gojs实现可编辑的table表格效果代码

代码语言:html

所属分类:表格

代码描述:gojs实现可编辑的table表格效果代码

代码标签: gojs 可编辑 table 表格

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>

</head>
<body>
    <div id="myDiagramDiv" style="height:100vh;width:100vw;">
       
    </div>
        <script type="text/javascript">
  function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            "undoManager.isEnabled": true
          });

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          $(go.Shape, { fill: "white" }),
          $(go.Panel, "Table",
            new go.Binding("itemArray", "people"),
            $(go.RowColumnDefinition,
              { row: 0, background: "lightgray" }),
            $(go.RowColumnDefinition,
              { row: 1, separatorStroke: "black" }),
            // the table headers -- remains even if itemArray is empty
            $(go.Panel, "TableRow",
              { isPanelMain: true },
              new go.Binding("itemArray", "columnDefinitions"),
              {
                itemTemplate:  // bound to a column definition object
                  $(go.Panel,
                    new go.Binding("column"),
                    $(go.TextBlock,
                      { margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" },
                      new go.Binding("text"))
               .........完整代码请登录后点击上方下载按钮下载查看

网友评论0