流程圖控件GoJS教程：樹狀圖的分支設(shè)置

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新試用版

SubTrees

樹形圖可能會(huì)變得非常大。簡(jiǎn)化圖的一種方法是隱藏樹的分支。“折疊”樹節(jié)點(diǎn)意味著不顯示其所有子節(jié)點(diǎn)及其鏈接，并遞歸折疊所有具有子節(jié)點(diǎn)的子節(jié)點(diǎn)。

要折疊樹中的節(jié)點(diǎn)，請(qǐng)將Node.isTreeExpanded設(shè)置為false。為了確保它被擴(kuò)展，將該屬性設(shè)置為true。您不應(yīng)在不是GraphObject.visible的Node上將此屬性設(shè)置為true 。

通常，在節(jié)點(diǎn)上提供一個(gè)按鈕以允許用戶根據(jù)需要折疊和展開子樹。 GoJS通過提供一種預(yù)定義的面板，稱為“ TreeExpanderButton”，使該面板易于實(shí)現(xiàn)，該面板用作折疊和展開節(jié)點(diǎn)子樹的按鈕。此按鈕更改子樹除節(jié)點(diǎn)本身以外的所有部分的可見性。

單擊擴(kuò)展器按鈕也會(huì)使對(duì)節(jié)點(diǎn)負(fù)責(zé)的布局無效。折疊子樹通常會(huì)導(dǎo)致較大的空白區(qū)域，而展開子樹通常會(huì)導(dǎo)致節(jié)點(diǎn)重疊，因此應(yīng)再次執(zhí)行新的布局以使樹看起來更好。

  diagram.nodeTemplate =
    $(go.Node, "Horizontal",
      $(go.Panel, "Auto",
        $(go.Shape, "Ellipse", { fill: null }),
        $(go.TextBlock,
          new go.Binding("text", "key"))
      ),
      $("TreeExpanderButton")
    );
 
  diagram.layout = $(go.TreeLayout);
 
  var nodeDataArray = [
    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
    { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Beta", to: "Gamma" },
    { from: "Beta", to: "Delta" },
    { from: "Alpha", to: "Epsilon" },
    { from: "Epsilon", to: "Zeta" },
    { from: "Epsilon", to: "Eta" },
    { from: "Epsilon", to: "Theta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

請(qǐng)注意，如果先折疊“ Beta”節(jié)點(diǎn)，然后折疊“ Alpha”根節(jié)點(diǎn)，然后再展開“ Alpha”節(jié)點(diǎn)，則“ Beta”節(jié)點(diǎn)將保持折疊狀態(tài)，而“ Epsilon”節(jié)點(diǎn)將保持展開狀態(tài)。這是因?yàn)檎郫B操作會(huì)記住子樹內(nèi)節(jié)點(diǎn)的狀態(tài)，即屬性Node.wasTreeExpanded。通過子樹遞歸時(shí)，擴(kuò)展操作會(huì)尊重該屬性的值。

您可能還想從樹上開始大部分或完全崩潰。首先，在模板中將Node.isTreeExpanded設(shè)置為false。這將僅顯示樹的根。其次，如果要顯示樹的三個(gè)級(jí)別，請(qǐng)調(diào)用Node.expandTree。

  diagram.nodeTemplate =
    $(go.Node, "Horizontal",
      { isTreeExpanded: false },  // by default collapsed
      $(go.Panel, "Auto",
        $(go.Shape, "Ellipse", { fill: null }),
        $(go.TextBlock,
          new go.Binding("text", "key"))
      ),
      $("TreeExpanderButton")
    );
 
  diagram.layout = $(go.TreeLayout);
 
  // After the nodes and links have been created,
  // expand each of the tree roots to 3 levels deep.
  diagram.addDiagramListener("InitialLayoutCompleted", function(e) {
      e.diagram.findTreeRoots().each(function(r) { r.expandTree(3); });
    });
 
  var nodeDataArray = [
    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
    { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" },
    { key: "Iota" }, { key: "Kappa" }, { key: "Lambda" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Beta", to: "Gamma" },
    { from: "Beta", to: "Delta" },
    { from: "Alpha", to: "Epsilon" },
    { from: "Epsilon", to: "Zeta" },
    { from: "Epsilon", to: "Eta" },
    { from: "Eta", to: "Theta" },
    { from: "Gamma", to: "Iota" },
    { from: "Iota", to: "Kappa" },
    { from: "Iota", to: "Lambda" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

====================================================

想要購買GoJS正版授權(quán)的朋友可以

有關(guān)產(chǎn)品的最新消息和最新資訊，歡迎掃描關(guān)注下方微信公眾號(hào)