GoJs节点的折叠展开怎么实现寻技术

这篇文章主要介绍了GoJs节点的折叠展开怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇GoJs节点的折叠展开怎么实现文章都会有所收获，下面我们一起来看看吧。

节点折叠展开的不同情况

对于节点的折叠展开分几种情况。第一种是对于树形布局的特有属性可以对树形布局后代的节点进行一个折叠展开，第二种是前面文章提到的

go.Group(组)

和

go.Panel(面板)

内部的内容也就是节点内部信息的折叠和展开。

树形布局特有的属性后代节点的折叠展开

this.myDiagram.nodeTemplate =
$$(go.Node, "Spot",
    $$(go.Panel, "Auto",
        $$(go.Shape, "Circle",
            { width: 30, height: 30},
            new go.Binding("fill", "color"),
            new go.Binding("figure", "figure"),
        ),
        $$(go.TextBlock, 
            new go.Binding("text", "text")),
    ),
    $$("TreeExpanderButton",
    { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
    )
);

因为属性布局的特殊性，有明确的父子关系。因此

gojs

内部给内置了名字为

TreeExpanderButton

的树图折叠展开按钮，在使用的时候只需要根据自己的脑图朝向把图形折叠展开按钮的按钮根据

Spot(点布局)

给放置到和后代节点解除的位置就可以了。默认可以实现树形结构的折叠展开。

go.Group(组)的内部元素的展开折叠

前文中提到，可以给节点中的属性

isGroup

设置

true

。将此节点设置为组的父级显示内容。然后通过其他节点内部的属性

group

为组的父级节点的

key

值，来渲染组的上下级关系。代码示例如下

this.myDiagram.groupTemplate  =
$$(go.Group, "Horizontal",
    $$(go.Panel, "Auto",
        $$(go.Shape, "Circle",{width:200,height:200},
            new go.Binding("fill", "color"),
            new go.Binding("figure", "figure"),
        ),
        $$(go.Panel,"Horizontal",
            $$("SubGraphExpanderButton",{ margin: new go.Margin(0, 3, 5, 0)}),
            $$(go.TextBlock, 
                new go.Binding("text", "text")),
        ),
    ),
);
this.myDiagram.nodeTemplate  =
$$(go.Node, "Auto",
    $$(go.Shape, "Circle",{width:50,height:50},
        new go.Binding("fill", "color"),
        new go.Binding("figure", "figure"),
    ),
    $$(go.TextBlock, 
        new go.Binding("text", "text")),
);

组布局有自己的布局模板为

groupTemplate

，可以根据组布局模板对组的整体样式进行调整。当然在组内的其他节点仍然可以通过

nodeTemplate

来设置自己的样式。组的展开折叠的属性是

SubGraphExpanderButton

，可以把组的展开折叠按钮作为一个普通的绘图节点调整想要现实的额位置，其功能为

gojs

内置，可以直接使用其功能。

go.Panel(面板)的内部元素的展开折叠

在节点图形的模板配置中，如果我们想调整其他的绘图模板的位置，需要两个绘图模板当成一个整体进行布局展示，例如

go.Shape(几何图形)

和

go.TextBlock(文本信息)

在节点内相对位置不变的需求下，是不能直接把

go.TextBlock(文本信息)

放到

go.Shape(几何图形)

内部的，如果想要两个位置相对绑定，就需要把两个绘图模板放到同一个

go.Panel(面板之下)

。因此对于面板内的元素也可以实现一个展开折叠。

//data
nodes: [
    {
      key: 1,
      text:"三国",
      list1: ["魏", "蜀", "吴"],
    },
],
//methods
this.myDiagram.nodeTemplate = $$(
go.Node,
"Auto",
$$(go.Shape, "Rectangle", { fill: "#67B73C",width:100,height:100 }),
$$(
  go.Panel,
  "Table",
  { column: 0 },
  $$(go.TextBlock, {
    column: 0,
    margin: new go.Margin(3, 3, 0, 3),
    font: "bold 12pt sans-serif",
  },new go.Binding("text", "text")),
  $$("PanelExpanderButton", "LIST1", { column: 1 }),
  $$(
    go.Panel,
    "Vertical",
    { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
    new go.Binding("itemArray", "list1")
  )
)
);

对于