console
var $ = go.GraphObject.make; // 构造方法
var myDiagram =
$(go.Diagram, "myDiagramDiv5", // 图形
{
"undoManager.isEnabled": true, // 是否允许撤回
initialDocumentSpot: go.Spot.TopCenter,
initialViewportSpot: go.Spot.TopCenter,
padding: new go.Margin(100, 5, 25, 5),
layout: $(go.TreeLayout,
{
angle: 90, layerSpacing: 80,
isOngoing: false, // 展开/折叠面板时不要重新拉伸
// treeStyle: go.TreeLayout.StyleLastParents,
// alternateAngle: 15, // 交替角
// alternateAlignment: go.TreeLayout.AlignmentStart, // 交替排列
// alternateNodeIndent: 0, //交替节点缩进
// alternateNodeIndentPastParent: 1,
// alternateNodeSpacing: 15,
// alternateLayerSpacing: 40,
// alternateLayerSpacingParentOverlap: 1,
// alternatePortSpot: new go.Spot(0.001, 1, 20, 0), // 备用端口点
// alternateChildPortSpot: go.Spot.Left // 备用子端口点
}
), //布局模式 角度，间距
model: $(go.TreeModel, {
nodeDataArray: [
{ key: "1", name: "Don Meow", source: "https://gojs.net.cn/images/learn/cat1.png", color: 'red', highlight: true, dataSource: [{ name: '张三', age: 17},{name: '张三', age: 12}]},
{ key: "2", parent: "1", name: "Demeter", source: "https://gojs.net.cn/images/learn/cat2.png", color: 'yellow', highlight: false, dataSource: [{name: '李四', age: 13}] },
{ key: "3", parent: "1", name: "Copricat", source: "https://gojs.net.cn/images/learn/cat3.png", color: 'white', highlight: undefined},
{ key: "4", parent: "3", name: "Jellylorum", source: "https://gojs.net.cn/images/learn/cat4.png", color: 'black', highlight: undefined, dataSource: [{name: '小明', age: 21}] },
{ key: "5", parent: "3", name: "Alonzo", source: "https://gojs.net.cn/images/learn/cat5.png", color: 'orange', highlight: undefined, dataSource: [{name: '小红', age: 50}] },
{ key: "6", parent: "2", name: "Munkustrap", source: "https://gojs.net.cn/images/learn/cat6.png", color: 'green', highlight: undefined, dataSource: [{name: '小绿', age: 26}] }
],
}),
// Vertical. Horizontal
nodeTemplate: $(go.Node, "Vertical", { selectionObjectName: 'BODY' },
$(go.Panel, "Auto", { name: "BODY" },
$(go.Shape, "Rectangle",
{ fill: "#44CCFF", stroke: null }
),
$(go.Panel, "Vertical",
$(go.Panel, "Horizontal",
$(go.Picture, { margin: 10, width: 50, height: 50, background: "red" },new go.Binding("source")),
$(go.TextBlock, "Default Text", { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
new go.Binding("text", "name")),
$(go.Shape, "TriangleDown", {
width: 40, height: 60, margin: 4, strokeWidth: 0,
},
new go.Binding("fill", "color"),
new go.Binding( "fill" , "highlight" , (v) => { return v ? "pink" : "lightblue" ; }),
new go.Binding( "stroke" , "highlight" ,(v) => {return v ? "red" : "blue";}),
new go.Binding( "strokeWidth" , "highlight" , (v) => { return v ? 3 : 1 ; }),
),
),
$(go.Panel, "Vertical",
{stretch: go.GraphObject.Horizontal,visible: false},
new go.Binding("visible", "dataSource"),
$(go.Panel, "Table",
{ stretch: go.GraphObject.Horizontal },
$(go.TextBlock, "开关",
{
alignment: go.Spot.Left,
font: "10pt Verdana, sans-serif",
click: (e) => {
console.log(e)
}
}
),
$("PanelExpanderButton", "COLLAPSIBLE",
{
column: 1, alignment: go.Spot.Right,
click: function (e, obj) {
console.log(obj)
},
}
),
),
$(go.Panel, "Table",
new go.Binding("itemArray", "dataSource"),
$(go.RowColumnDefinition, { row: 0, background: "lightgray" }),
$(go.Panel, "TableRow",
{
isPanelMain: true,
itemArray:
[
{ attr: "name", text: "Name", column: 0 },
{ attr: "phone", text: "Phone", column: 1 },
{ attr: "age", text: "Age", column: 2 }
],
itemTemplate:
$(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"))
)
},
),
{
name: "COLLAPSIBLE",
stretch: go.GraphObject.Horizontal,
minSize: new go.Size(100, 10),
defaultAlignment: go.Spot.Left,
defaultStretch: go.GraphObject.Horizontal,
defaultColumnSeparatorStroke: "gray",
defaultRowSeparatorStroke: "gray",
padding: 2,
background: "white",
itemTemplate:
$(go.Panel, "TableRow",
{fromLinkable: true, toLinkable: true},
$(go.TextBlock,
{
column: 0,
margin: new go.Margin(0, 2),
stretch: go.GraphObject.Horizontal,
font: "bold 13px sans-serif",
wrap: go.TextBlock.None,
overflow: go.TextBlock.OverflowEllipsis,
fromLinkable: false, toLinkable: false
},
{ font: "10pt Verdana, sans-serif" },
new go.Binding("text", "name")
),
$(go.TextBlock,
{
column: 1,
margin: new go.Margin(0, 2),
stretch: go.GraphObject.Horizontal,
font: "bold 13px sans-serif",
wrap: go.TextBlock.None,
overflow: go.TextBlock.OverflowEllipsis,
fromLinkable: false, toLinkable: false
},
{ font: "10pt Verdana, sans-serif" },
new go.Binding("text", "phone")
),
$(go.TextBlock,
{
column: 2,
margin: new go.Margin(0, 2),
stretch: go.GraphObject.Horizontal,
font: "bold 13px sans-serif",
wrap: go.TextBlock.None,
overflow: go.TextBlock.OverflowEllipsis,
fromLinkable: false, toLinkable: false
},
{ font: "10pt Verdana, sans-serif" },
new go.Binding("text", "age")
)
),
},
),
),
),
),
$(go.Panel,
{ height: 17 },
$("TreeExpanderButton")
),
),
linkTemplate: $(go.Link,
{ routing: go.Link.Orthogonal, corner: 5 }, // 路由：正交、 圆角： 5 默认为0
$(go.Shape, { strokeWidth: 3, stroke: '#555', toArrow: "Standard", }), // 图形宽3、颜色#555
$(go.Shape, { toArrow: "Standard", stroke: null, }),
),
});
<div id="myDiagramDiv5" style="width:700px;height:800px;"></div>
#myDiagramDiv5 {
background-color: #F8F8F8;
border: 1px solid #aaa;
}