GoJs節(jié)點(diǎn)的折疊展開怎么實(shí)現(xiàn)

這篇文章主要介紹了GoJs節(jié)點(diǎn)的折疊展開怎么實(shí)現(xiàn)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇GoJs節(jié)點(diǎn)的折疊展開怎么實(shí)現(xiàn)文章都會(huì)有所收獲，下面我們一起來看看吧。

節(jié)點(diǎn)折疊展開的不同情況

對于節(jié)點(diǎn)的折疊展開分幾種情況。第一種是對于樹形布局的特有屬性可以對樹形布局后代的節(jié)點(diǎn)進(jìn)行一個(gè)折疊展開，第二種是前面文章提到的go.Group(組)和go.Panel(面板)內(nèi)部的內(nèi)容也就是節(jié)點(diǎn)內(nèi)部信息的折疊和展開。

樹形布局特有的屬性后代節(jié)點(diǎn)的折疊展開

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 },
    )
);

因?yàn)閷傩圆季值奶厥庑?，有明確的父子關(guān)系。因此gojs內(nèi)部給內(nèi)置了名字為TreeExpanderButton的樹圖折疊展開按鈕，在使用的時(shí)候只需要根據(jù)自己的腦圖朝向把圖形折疊展開按鈕的按鈕根據(jù)Spot(點(diǎn)布局)給放置到和后代節(jié)點(diǎn)解除的位置就可以了。默認(rèn)可以實(shí)現(xiàn)樹形結(jié)構(gòu)的折疊展開。

go.Group(組)的內(nèi)部元素的展開折疊

前文中提到，可以給節(jié)點(diǎn)中的屬性isGroup設(shè)置true。將此節(jié)點(diǎn)設(shè)置為組的父級顯示內(nèi)容。然后通過其他節(jié)點(diǎn)內(nèi)部的屬性group為組的父級節(jié)點(diǎn)的key值，來渲染組的上下級關(guān)系。代碼示例如下

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，可以根據(jù)組布局模板對組的整體樣式進(jìn)行調(diào)整。當(dāng)然在組內(nèi)的其他節(jié)點(diǎn)仍然可以通過nodeTemplate來設(shè)置自己的樣式。組的展開折疊的屬性是SubGraphExpanderButton，可以把組的展開折疊按鈕作為一個(gè)普通的繪圖節(jié)點(diǎn)調(diào)整想要現(xiàn)實(shí)的額位置，其功能為gojs內(nèi)置，可以直接使用其功能。

go.Panel(面板)的內(nèi)部元素的展開折疊

在節(jié)點(diǎn)圖形的模板配置中，如果我們想調(diào)整其他的繪圖模板的位置，需要兩個(gè)繪圖模板當(dāng)成一個(gè)整體進(jìn)行布局展示，例如go.Shape(幾何圖形)和go.TextBlock(文本信息)在節(jié)點(diǎn)內(nèi)相對位置不變的需求下，是不能直接把go.TextBlock(文本信息)放到go.Shape(幾何圖形)內(nèi)部的，如果想要兩個(gè)位置相對綁定，就需要把兩個(gè)繪圖模板放到同一個(gè)go.Panel(面板之下)。因此對于面板內(nèi)的元素也可以實(shí)現(xiàn)一個(gè)展開折疊。

//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")
  )
)
);

對于go.Panel(面板)的折疊展開按鈕是通過內(nèi)置的PanelExpanderButton來實(shí)現(xiàn)的，其然后其第二個(gè)參數(shù)為需要折疊的go.Panel的name屬性保持一直，則可以實(shí)現(xiàn)折疊展開。當(dāng)然也可以根據(jù)自己的需求對其樣式進(jìn)行修改。

關(guān)于“GoJs節(jié)點(diǎn)的折疊展開怎么實(shí)現(xiàn)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“GoJs節(jié)點(diǎn)的折疊展開怎么實(shí)現(xiàn)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。