gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
104 lines (101 loc) • 3.44 kB
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>