GoJS/extensions/ScrollingTable.html at master · CarlBoneri/GoJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Table</title>
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script src="ScrollingTable.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
<script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  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",
        { initialContentAlignment: go.Spot.Center });

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        {
          selectionObjectName: "SCROLLING",
          resizable: true, resizeObjectName: "SCROLLING"
        },
        $(go.TextBlock,
          { font: "bold 14px sans-serif" },
          new go.Binding("text", "key")),
        $(go.Panel, "Auto",
          $(go.Shape, { fill: "white" }),
          $("ScrollingTable",
            new go.Binding("TABLE.itemArray", "items"),
            {
              name: "SCROLLING",
              desiredSize: new go.Size(NaN, 60),
              "TABLE.itemTemplate":
                $(go.Panel, "TableRow",
                  $(go.TextBlock, { column: 0 }, new go.Binding("text", "name")),
                  $(go.TextBlock, { column: 1 }, new go.Binding("text", "value"))
                ),
              "TABLE.defaultColumnSeparatorStroke": "gray",
              "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
              "TABLE.defaultRowSeparatorStroke": "gray",
              "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
              "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
            }
          )
        )
      );

    myDiagram.model = new go.GraphLinksModel([
      { key: "Alpha", items:
        [
          { name: "A", value: 1 },
          { name: "B", value: 2 },
          { name: "C", value: 3 },
          { name: "D", value: 4 },
          { name: "E", value: 5 },
          { name: "F", value: 6 },
          { name: "G", value: 7 }
        ]
      },
      {
        key: "Beta", items:
        [
          { name: "Aa", value: 1 },
          { name: "Bb", value: 2 },
          { name: "Cc", value: 3 },
          { name: "Dd", value: 4 },
          { name: "Ee", value: 5 },
          { name: "Ff", value: 6 },
          { name: "Gg", value: 7 },
          { name: "Hh", value: 8 },
          { name: "Ii", value: 9 },
          { name: "Jj", value: 10 },
          { name: "Kk", value: 11 },
          { name: "Ll", value: 12 },
          { name: "Mm", value: 13 },
          { name: "Nn", value: 14 }
        ]
      },
      {
        key: "One item", items: [
          { name: "Only", value: "Item" }
        ]
      },
      {
        key: "No items", items: []
      }
    ],[
      { from: "Alpha", to: "Beta" }
    ]);
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  This makes use of the "ScrollingTable" Panel defined in <a href="ScrollingTable.js">ScrollingTable.js</a>.
  <br/>
  The "AutoRepeatButton" Panel is also defined in that file.
</div>
</body>
</html>