流程圖控件GoJS教程：按鈕的設置

---

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

通用按鈕

預定義面板中最通用的一種是“按鈕”。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { locationSpot: go.Spot.Center },
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.Panel, "Vertical",
        { margin: 3 },
        $("Button",
          { margin: 2,
            click: incrementCounter },
          $(go.TextBlock, "Click me!")),
        $(go.TextBlock,
          new go.Binding("text", "clickCount",
                         function(c) { return "Clicked " + c + " times."; }))
      )
    );

  function incrementCounter(e, obj) {
    var node = obj.part;
    var data = node.data;
    if (data && typeof(data.clickCount) === "number") {
      node.diagram.model.commit(function(m) {
        m.set(data, "clickCount", data.clickCount + 1);
      }, "clicked");
    }
  }

  diagram.model = new go.GraphLinksModel(
    [ { clickCount: 0 } ]);

TreeExpanderButtons

想要展開和折疊子樹是很常見的。通過將“ TreeExpanderButton”的實例添加到您的節點模板，很容易讓用戶控制它。

  diagram.nodeTemplate =
    $(go.Node, "Spot",
      $(go.Panel, "Auto",
        $(go.Shape, "Rectangle",
          { fill: "gold" }),
        $(go.TextBlock, "Click small button\nto collapse/expand subtree",
          { margin: 5 })
      ),
      $("TreeExpanderButton",
        { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
        { visible: true })
    );

  diagram.layout = $(go.TreeLayout, { angle: 90 });

  diagram.model = new go.GraphLinksModel(
    [ { key: 1 },
      { key: 2 } ],
    [ { from: 1, to: 2 } ] );

SubGraphExpanderButtons

想要展開和折疊包含子圖的組也很常見。您可以通過將“ SubGraphExpanderButton”的實例添加到組模板來讓用戶控制此操作。

  diagram.groupTemplate =
    $(go.Group, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.Panel, "Vertical",
        { margin: 5,
          defaultAlignment: go.Spot.Left },
        $(go.Panel, "Horizontal",
          $("SubGraphExpanderButton",
            { margin: new go.Margin(0, 3, 5, 0) }),
          $(go.TextBlock, "Group")
        ),
        $(go.Placeholder)
      )
    );

  diagram.model = new go.GraphLinksModel(
    [ { key: 0, isGroup: true },
      { key: 1, group: 0 },
      { key: 2, group: 0 },
      { key: 3, group: 0 } ] );

PanelExpanderButtons

通常需要擴展和折疊一個節點，從而顯示或隱藏有時不需要的細節。通過將“ PanelExpanderButton”的實例添加到您的節點模板，很容易讓用戶控制它。GraphObject.make的第二個參數應該是一個字符串，該字符串為希望按鈕切換其GraphObject.visible屬性的節點中的元素命名 。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { fill: "gold" }),
      $(go.Panel, "Table",
        { defaultAlignment: go.Spot.Top, defaultColumnSeparatorStroke: "black" },
        $(go.Panel, "Table",
          { column: 0 },
          $(go.TextBlock, "List 1",
            { column: 0, margin: new go.Margin(3, 3, 0, 3),
              font: "bold 12pt sans-serif" }),
          $("PanelExpanderButton", "LIST1",
            { column: 1 }),
          $(go.Panel, "Vertical",
            { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
            new go.Binding("itemArray", "list1"))
        ),
        $(go.Panel, "Table",
          { column: 1 },
          $(go.TextBlock, "List 2",
            { column: 0, margin: new go.Margin(3, 3, 0, 3),
              font: "bold 12pt sans-serif" }),
          $("PanelExpanderButton", "LIST2",
            { column: 1 }),
          $(go.Panel, "Vertical",
            { name: "LIST2", row: 1, column: 0, columnSpan: 2 },
            new go.Binding("itemArray", "list2"))
        )
      )
    );

  diagram.model = new go.GraphLinksModel([
    {
      key: 1,
      list1: [ "one", "two", "three", "four", "five" ],
      list2: [ "first", "second", "third", "fourth" ]
    }
  ]);

ContextMenuButtons

盡管可以以任何選擇的方式實現上下文菜單，但是通常使用預定義的“ ContextMenuButton”。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.TextBlock, "Use ContextMenu!",
        { margin: 5 })
    );

  diagram.nodeTemplate.contextMenu =
    $("ContextMenu",
      $("ContextMenuButton",
        $(go.TextBlock, "Shift Left"),
        { click: function(e, obj) { shiftNode(obj, -20); } }),
      $("ContextMenuButton",
        $(go.TextBlock, "Shift Right"),
        { click: function(e, obj) { shiftNode(obj, +20); } })
    );

  function shiftNode(obj, dist) {
    var adorn = obj.part;
    var node = adorn.adornedPart;
    node.diagram.commit(function(d) {
      var pos = node.location.copy();
      pos.x += dist;
      node.location = pos;
    }, "Shift");
  }

  diagram.model = new go.GraphLinksModel(
    [ { key: 1 } ] );

按鈕定義

在Extensions目錄的Buttons.js中 提供了所有預定義按鈕的實現。創建自己的按鈕時，您可能希望復制并改寫這些定義。

這些定義可能不是GoJS中由GraphObject.make使用的實際標準按鈕實現的最新描述。

請注意，這些按鈕的定義使用了GraphObject.defineBuilder靜態函數。這擴展了GraphObject.make的行為，以允許通過名稱（帶有可選參數）創建相當復雜的可視樹。您可以在整個示例和擴展中找到各種控件的定義，例如：

• Buttons.js
• HyperlinkText.js
• ScrollingTable.js
• 自動重復按鈕

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

想要購買GoJS正版授權的朋友可以

有關產品的最新消息和最新資訊，歡迎掃描關注下方微信公眾號