快捷導航

詳解GoJs節(jié)點的折疊展開實現(xiàn)

更新時間：2023年05月05日 10:21:09 作者：沅芷湘蘭

這篇文章主要為大家介紹了GoJs節(jié)點的折疊展開實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

前面的文章中提到了提示信息(toolTip)在節(jié)點信息內(nèi)容過多的時候，需要節(jié)點信息的內(nèi)容進行隱藏，在鼠標移入的時候進行未顯示信息的提示框形式的選中，本文講從另外的角度處理在畫布上的可視化圖形的內(nèi)容過多的時候的處理情況，一種是把節(jié)點的內(nèi)部的折疊和展開，另外一種就是對部分節(jié)點進行折疊和展開。

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

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

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

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

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

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

前文中提到，可以給節(jié)點中的屬性isGroup設(shè)置true。將此節(jié)點設(shè)置為組的父級顯示內(nèi)容。然后通過其他節(jié)點內(nèi)部的屬性group為組的父級節(jié)點的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ù)組布局模板對組的整體樣式進行調(diào)整。當然在組內(nèi)的其他節(jié)點仍然可以通過nodeTemplate來設(shè)置自己的樣式。組的展開折疊的屬性是SubGraphExpanderButton，可以把組的展開折疊按鈕作為一個普通的繪圖節(jié)點調(diào)整想要現(xiàn)實的額位置，其功能為gojs內(nèi)置，可以直接使用其功能。

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

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

//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來實現(xiàn)的，其然后其第二個參數(shù)為需要折疊的go.Panel的name屬性保持一直，則可以實現(xiàn)折疊展開。當然也可以根據(jù)自己的需求對其樣式進行修改。

總結(jié)

在可視化圖形中。因為數(shù)據(jù)量大的時候?qū)е嘛@示節(jié)點相互折疊導致不完整，往往會對節(jié)點內(nèi)顯示的內(nèi)容進行隱藏。除了前面文章中提到的toolTip(提示信息)之外，還可以通過本文中的折疊展開按鈕對內(nèi)容進行折疊，以保證瀏覽的重點內(nèi)容的完整顯示。

以上就是詳解GoJs節(jié)點的折疊展開實現(xiàn)的詳細內(nèi)容，更多關(guān)于GoJs節(jié)點折疊展開的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: