gojs - 展开另一个组时折叠一个组
问题描述
我创建了一个组。如果我单击以展开一个组,我需要检查是否有任何组已经展开,如果是,我需要折叠该组并展开单击的组。
解决方案
这是https://forum.nwoods.com/t/collapse-a-group-when-another-group-is-expanded/12670/3的副本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expanding only one subgraph at a time</title>
<meta name="description" content="Expanding a subgraph collapses other subgraphs in the same group." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<script src="go.js"></script>
<script>
function init() {
var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv",
{
"SubGraphExpanded": function(e) {
var groups = e.subject;
groups.each(function(g) {
var container = g.containingGroup;
if (container !== null) {
container.memberParts.each(function(m) {
if (m !== g && m instanceof go.Group) {
m.collapseSubGraph();
}
})
}
});
}
});
myDiagram.groupTemplate =
$(go.Group, go.Panel.Auto,
{ isSubGraphExpanded: false },
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "", function(x) { return go.Brush.randomColor(); })),
$(go.Panel, go.Panel.Vertical,
$(go.Panel, go.Panel.Horizontal,
$("SubGraphExpanderButton"),
$(go.TextBlock,
new go.Binding("text", "key"))),
$(go.Placeholder, { margin: 5 })),
{
layout: $(go.GridLayout,
{ cellSize: new go.Size(1, 1), alignment: go.GridLayout.Position })
});
myDiagram.model.nodeDataArray = [
{ key: "Root", isGroup: true },
{ key: "A", group: "Root", isGroup: true },
{ key: "B", group: "Root", isGroup: true },
{ key: "A1", group: "A", isGroup: true },
{ key: "A2", group: "A", isGroup: true },
{ key: "B1", group: "B", isGroup: true },
{ key: "B2", group: "B", isGroup: true },
{ key: "A11", group: "A1" },
{ key: "A12", group: "A1", isGroup: true },
{ key: "A21", group: "A2" },
{ key: "A22", group: "A2", isGroup: true },
{ key: "B11", group: "B1", isGroup: true },
{ key: "B12", group: "B1", isGroup: true },
{ key: "B21", group: "B2" },
{ key: "B22", group: "B2" },
{ key: "A121", group: "A12" },
{ key: "A122", group: "A12" },
{ key: "A221", group: "A22" },
{ key: "A222", group: "A22" },
{ key: "B111", group: "B11" },
{ key: "B112", group: "B11" },
{ key: "B121", group: "B12" },
{ key: "B122", group: "B12" }
];
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px blue; width:100%; height:500px; min-width: 200px"></div>
</body>
</html>
推荐阅读
- python - 如何在 Python 中转换指数并去掉“e+”?
- c - 可编程中断控制器:PIC1 和 PIC2 在实模式下不返回零
- javascript - 在firebase中分页时如何检测第一页或最后一页中的am
- python - argparse:在一个破折号中有多个标志的 nargs?
- linux - 执行和获取 bash 文件的所有选项有哪些?为什么不检查shebang?
- typescript - 打字稿假设我返回任何字符串,即使显式检查返回值是否包含在特定字符串的数组中
- r - 在分组后删除异常值,然后计算每组的平均值
- javascript - 函数不会让它过去 else if
- amazon-web-services - 在 Chrome 上向 S3 发送 100MB+ 文件时内存崩溃
- android - 使用 RxBLe Android 订阅通知更改