流程图控件GoJS教程：按钮的设置

为了您的方便，我们定义了几个Panel来通用。这些包括“按钮”，“ TreeExpanderButton”，“ SubGraphExpanderButton”，“ PanelExpanderButton”和“ ContextMenuButton”。

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 buttonnto 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正版授权的朋友可以咨询官方客服

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号

标签：

来源：慧都