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

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

關于“GoJs節點的折疊展開怎么實現”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“GoJs節點的折疊展開怎么實現”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。