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

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

前面的許多示例都提供了用于節(jié)點(diǎn)、組或鏈接的自定義模板。這些示例說明了如何通過數(shù)據(jù)綁定對特定數(shù)據(jù)實(shí)例的模板進(jìn)行簡單調(diào)整。但是，如果您希望同時(shí)在單個(gè)圖中具有完全不同的外觀或行為的節(jié)點(diǎn)怎么辦？

可以定義一個(gè)節(jié)點(diǎn)模板，其中包括要顯示的所有類型節(jié)點(diǎn)的所有可能配置。要進(jìn)行所需的更改，將需要大量的數(shù)據(jù)綁定或代碼。通常，您將希望使GraphObject.visible模板的大部分不可見，以便使要顯示的一個(gè)面板可見。但是這種技術(shù)很難使用-模板變得太復(fù)雜，太快。

相反，GoJS支持所需的任意數(shù)量的模板-您可以動(dòng)態(tài)選擇要用來表示特定節(jié)點(diǎn)數(shù)據(jù)的模板。這確實(shí)意味著潛在的大量模板，但是每個(gè)模板都將更加簡單，易于編寫和維護(hù)。

每個(gè)圖實(shí)際上都為每種零件類型（節(jié)點(diǎn)，組和鏈接）保留了一個(gè)模板映射。每個(gè)地圖都將“類別”名稱與模板相關(guān)聯(lián)。例如，當(dāng)圖想要為特定的節(jié)點(diǎn)數(shù)據(jù)對象創(chuàng)建一個(gè)節(jié)點(diǎn)時(shí)，圖將使用該節(jié)點(diǎn)數(shù)據(jù)的類別在Diagram.nodeTemplateMap中查找節(jié)點(diǎn)模板。使用Diagram.groupTemplateMap和Diagram.linkTemplateMap可以完成類似的查找。

每個(gè)圖最初都有自己的模板圖，這些圖上存儲(chǔ)有預(yù)定義的類別。任何數(shù)據(jù)對象的默認(rèn)類別都是空字符串“”。該Diagram.nodeTemplateMap最初包含空字符串一個(gè)很簡單的節(jié)點(diǎn)模板保存一個(gè)TextBlock中，其TextBlock.text屬性綁定到數(shù)據(jù)的數(shù)據(jù)轉(zhuǎn)換為字符串。您可以在許多前面的示例（例如“組和鏈接”示例）中看到節(jié)點(diǎn)，組和鏈接的默認(rèn)模板。

Diagram.nodeTemplate的值就是thatDiagram.nodeTemplateMap.get（“”）的值。設(shè)置Diagram.nodeTemplate只是用空字符串替換了Diagram.nodeTemplateMap中命名的模板。

在Extensions目錄的Templates.js中提供了所有預(yù)定義模板的實(shí)現(xiàn)。創(chuàng)建自己的模板時(shí)，您可能希望復(fù)制和修改這些定義。

節(jié)點(diǎn)模板示例

  // the "simple" template just shows the key string and the color in the background,
  // but it also includes a tooltip that shows the description
  var simpletemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Ellipse",
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        new go.Binding("text", "key")),
      {
        toolTip:
          $("ToolTip",
            $(go.TextBlock, { margin: 4 },
              new go.Binding("text", "desc"))
          )
      }
    );

  // the "detailed" template shows all of the information in a Table Panel
  var detailtemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        new go.Binding("fill", "color")),
      $(go.Panel, "Table",
        { defaultAlignment: go.Spot.Left },
        $(go.TextBlock, { row: 0, column: 0, columnSpan: 2, font: "bold 12pt sans-serif" },
          new go.Binding("text", "key")),
        $(go.TextBlock, { row: 1, column: 0 }, "Description:"),
        $(go.TextBlock, { row: 1, column: 1 }, new go.Binding("text", "desc")),
        $(go.TextBlock, { row: 2, column: 0 }, "Color:"),
        $(go.TextBlock, { row: 2, column: 1 }, new go.Binding("text", "color"))
      )
    );

  // create the nodeTemplateMap, holding three node templates:
  var templmap = new go.Map(); // In TypeScript you could write: new go.Map<string, go.Node>();
  // for each of the node categories, specify which template to use
  templmap.add("simple", simpletemplate);
  templmap.add("detailed", detailtemplate);
  // for the default category, "", use the same template that Diagrams use by default;
  // this just shows the key value as a simple TextBlock
  templmap.add("", diagram.nodeTemplate);

  diagram.nodeTemplateMap = templmap;

  diagram.model.nodeDataArray = [
    { key: "Alpha", desc: "first letter", color: "green" },  // uses default category: ""
    { key: "Beta", desc: "second letter", color: "lightblue", category: "simple" },
    { key: "Gamma", desc: "third letter", color: "pink", category: "detailed" },
    { key: "Delta", desc: "fourth letter", color: "cyan", category: "detailed" }
  ];

如果將鼠標(biāo)懸停在“Beta”節(jié)點(diǎn)上，您將看到顯示說明字符串的工具提示。詳細(xì)的模板不會(huì)打擾使用工具提示來顯示其他信息，因?yàn)橐呀?jīng)顯示了所有內(nèi)容。

默認(rèn)情況下，模型和圖了解節(jié)點(diǎn)數(shù)據(jù)或鏈接數(shù)據(jù)的類別的方式是查看其類別屬性。如果要在數(shù)據(jù)上使用其他屬性，例如，由于要使用category屬性來表示不同的含義，請將Model.nodeCategoryProperty設(shè)置為產(chǎn)生實(shí)際類別字符串值的屬性的名稱。或?qū)odel.nodeCategoryProperty設(shè)置為空字符串，以使所有節(jié)點(diǎn)使用默認(rèn)節(jié)點(diǎn)模板。

項(xiàng)目模板示例

對于具有Panel.itemArray值的Panel，還有Panel.itemTemplateMap。與節(jié)點(diǎn)，組和鏈接一樣，Panel.itemTemplate只是對在Panel.itemTemplateMap中以空字符串命名的模板的引用。同樣，Panel.itemCategoryProperty在項(xiàng)目數(shù)據(jù)上為屬性命名，該屬性用于標(biāo)識(shí)要從itemTemplateMap使用的模板。

  // create a template map for items
  var itemtemplates = new go.Map(); // In TypeScript you could write: new go.Map<string, go.Panel>();

  // the template when type == "text"
  itemtemplates.add("text",
    $(go.Panel,
      $(go.TextBlock,
        new go.Binding("text"))
    ));

  // the template when type == "button"
  itemtemplates.add("button",
    $("Button",
      $(go.TextBlock,
        new go.Binding("text")),
      // convert a function name into a function value,
      // because functions cannot be represented in JSON format
      new go.Binding("click", "handler",
                      function(name) {
                        if (name === "alert") return raiseAlert;  // defined below
                        return null;
                      })
    ));

  diagram.nodeTemplate =
    $(go.Node, "Vertical",
      $(go.TextBlock,
        new go.Binding("text", "key")),
      $(go.Panel, "Auto",
        $(go.Shape, { fill: "white" }),
        $(go.Panel, "Vertical",
          {
            margin: 3,
            defaultAlignment: go.Spot.Left,
            itemCategoryProperty: "type",  // this property controls the template used
            itemTemplateMap: itemtemplates  // map was defined above
          },
          new go.Binding("itemArray", "info"))
      )
    );

  function raiseAlert(e, obj) {  // here OBJ will be the item Panel
    var node = obj.part;
    alert(node.data.key + ": " + obj.data.text);
  }

  // The model data includes item arrays in the node data.
  diagram.model = new go.GraphLinksModel( [
    { key: "Alpha",
      info: [
              { type: "text", text: "some text" },
              { type: "button", text: "Click me!", handler: "alert"}
            ]
    },
    { key: "Beta",
      info: [
              { type: "text", text: "first line" },
              { type: "button", text: "First Button", handler: "alert"},
              { type: "text", text: "second line" },
              { type: "button", text: "Second Button", handler: "alert" }
            ]
    }
  ],[
    { from: "Alpha", to: "Beta" }
  ]);

表標(biāo)題顯示項(xiàng)目數(shù)據(jù)的示例

  var itemTemplateMap = new go.Map();
  itemTemplateMap.add("",
    $(go.Panel, "TableRow",
      $(go.TextBlock, new go.Binding("text", "name"),
        { column: 0, margin: 2, font: "bold 10pt sans-serif" }),
      $(go.TextBlock, new go.Binding("text", "phone"),
        { column: 1, margin: 2 }),
      $(go.TextBlock, new go.Binding("text", "loc"),
        { column: 2, margin: 2 })
    ));
  itemTemplateMap.add("Header",
    $(go.Panel, "TableRow",
      $(go.TextBlock, new go.Binding("text", "name"),
        { column: 0, margin: 2, font: "bold 10pt sans-serif" }),
      $(go.TextBlock, new go.Binding("text", "phone"),
        { column: 1, margin: 2, font: "bold 10pt sans-serif" }),
      $(go.TextBlock, new go.Binding("text", "loc"),
        { column: 2, margin: 2, font: "bold 10pt sans-serif" })
    ));

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, { fill: "white" }),
      $(go.Panel, "Table",
        new go.Binding("itemArray", "people"),
        {
          defaultAlignment: go.Spot.Left,
          defaultColumnSeparatorStroke: "black",
          itemTemplateMap: itemTemplateMap
        },
        $(go.RowColumnDefinition,
          { row: 0, background: "lightgray" }),
        $(go.RowColumnDefinition,
          { row: 1, separatorStroke: "black" })
      )
    );

  diagram.model =
    $(go.GraphLinksModel,
      {
        nodeDataArray: [
          { key: "group1",
            people: [
              { name: "Person", phone: "Phone", loc: "Location", category: "Header" },
              { name: "Alice", phone: "2345", loc: "C4-E18" },
              { name: "Bob", phone: "9876", loc: "E1-B34" },
              { name: "Carol", phone: "1111", loc: "C4-E23" },
              { name: "Ted", phone: "2222", loc: "C4-E197" },
              { name: "Robert", phone: "5656", loc: "B1-A27" },
              { name: "Natalie", phone: "5698", loc: "B1-B6" }
            ] }
        ],
        linkDataArray: [
        ]
      }
    );

為表面板具有不同標(biāo)題的自然方法是讓第一行（即第一項(xiàng)）保存標(biāo)題的數(shù)據(jù)，但是要采用不同的樣式。在此示例中，我們在Panel.itemTemplateMap中定義一個(gè)“標(biāo)題”項(xiàng)目模板。

如果您不想在itemArray中包含標(biāo)頭數(shù)據(jù)，并且想要在節(jié)點(diǎn)模板中而不是在項(xiàng)目模板中定義標(biāo)頭，請參見Item Arrays中的示例。

更改零件的類別

要更改數(shù)據(jù)對象的表示形式，請調(diào)用Model.setCategoryForNodeData 或GraphLinksModel.setCategoryForLinkData。（如果設(shè)置了數(shù)據(jù)綁定的Part的Part.category，它將為您調(diào)用Model方法。）這將導(dǎo)致該圖丟棄該數(shù)據(jù)的任何現(xiàn)有Part并使用與該對象關(guān)聯(lián)的新模板重新創(chuàng)建新類別值。

  // this function changes the category of the node data to cause the Node to be replaced
  function changeCategory(e, obj) {
    var node = obj.part;
    if (node) {
      var diagram = node.diagram;
      diagram.startTransaction("changeCategory");
      var cat = diagram.model.getCategoryForNodeData(node.data);
      if (cat === "simple")
        cat = "detailed";
      else
        cat = "simple";
      diagram.model.setCategoryForNodeData(node.data, cat);
      diagram.commitTransaction("changeCategory");
    }
  }

  // The "simple" template just shows the key string and the color in the background.
  // There is a Button to invoke the changeCategory function.
  var simpletemplate =
    $(go.Node, "Spot",
      $(go.Panel, "Auto",
        $(go.Shape, "Ellipse",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          new go.Binding("text", "key"))
      ),
      $("Button",
        { alignment: go.Spot.TopRight },
        $(go.Shape, "AsteriskLine", { width: 8, height: 8 }),
        { click: changeCategory })
    );

  // The "detailed" template shows all of the information in a Table Panel.
  // There is a Button to invoke the changeCategory function.
  var detailtemplate =
    $(go.Node, "Spot",
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.Panel, "Table",
          { defaultAlignment: go.Spot.Left },
          $(go.TextBlock, { row: 0, column: 0, columnSpan: 2, font: "bold 12pt sans-serif" },
            new go.Binding("text", "key")),
          $(go.TextBlock, { row: 1, column: 0 }, "Description:"),
          $(go.TextBlock, { row: 1, column: 1 }, new go.Binding("text", "desc")),
          $(go.TextBlock, { row: 2, column: 0 }, "Color:"),
          $(go.TextBlock, { row: 2, column: 1 }, new go.Binding("text", "color"))
        )
      ),
      $("Button",
        { alignment: go.Spot.TopRight },
        $(go.Shape, "AsteriskLine", { width: 8, height: 8 }),
        { click: changeCategory })
    );

  var templmap = new go.Map(); // In TypeScript you could write: new go.Map<string, go.Node>();
  templmap.add("simple", simpletemplate);
  templmap.add("detailed", detailtemplate);
  diagram.nodeTemplateMap = templmap;

  diagram.layout = $(go.TreeLayout);

  diagram.model.nodeDataArray = [
    { key: "Beta", desc: "second letter", color: "lightblue", category: "simple" },
    { key: "Gamma", desc: "third letter", color: "pink", category: "detailed" },
    { key: "Delta", desc: "fourth letter", color: "cyan", category: "detailed" }
  ];
  diagram.model.linkDataArray = [
    { from: "Beta", to: "Gamma" },
    { from: "Gamma", to: "Delta" }
  ];

單擊任何節(jié)點(diǎn)上的“星號(hào)”按鈕，可以在每個(gè)節(jié)點(diǎn)的“簡單”類別和“詳細(xì)”類別之間動(dòng)態(tài)切換。

更改模板圖

您也可以替換一個(gè)或所有圖的模板映射（例如Diagram.nodeTemplateMap），以丟棄并重新創(chuàng)建圖中的所有節(jié)點(diǎn)。如果僅對節(jié)點(diǎn)使用默認(rèn)模板，則只需替換Diagram.nodeTemplate即可。

進(jìn)行此更改的一種常見情況是Diagram.scale更改。當(dāng)用戶縮小得足夠遠(yuǎn)時(shí)，沒有必要對每個(gè)節(jié)點(diǎn)進(jìn)行過多的詳細(xì)說明。

如果在此示例中縮小視圖，則DiagramEvent偵聽器將檢測Diagram.scale何時(shí)足夠小以對所有節(jié)點(diǎn)使用更簡單的模板。再次放大，然后突然使用更詳細(xì)的模板。

  // The "simple" template just shows the key string and the color in the background.
  var simpletemplate =
    $(go.Node, "Spot",
      $(go.Panel, "Auto",
        $(go.Shape, "Ellipse",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          new go.Binding("text", "key"))
      )
    );

  // The "detailed" template shows all of the information in a Table Panel.
  var detailtemplate =
    $(go.Node, "Spot",
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.Panel, "Table",
          { defaultAlignment: go.Spot.Left },
          $(go.TextBlock, { row: 0, column: 0, columnSpan: 2, font: "bold 12pt sans-serif" },
            new go.Binding("text", "key")),
          $(go.TextBlock, { row: 1, column: 0 }, "Description:"),
          $(go.TextBlock, { row: 1, column: 1 }, new go.Binding("text", "desc")),
          $(go.TextBlock, { row: 2, column: 0 }, "Color:"),
          $(go.TextBlock, { row: 2, column: 1 }, new go.Binding("text", "color"))
        )
      )
    );

  diagram.layout = $(go.TreeLayout);

  diagram.model.nodeDataArray = [
    { key: "Beta", desc: "second letter", color: "lightblue" },
    { key: "Gamma", desc: "third letter", color: "pink" },
    { key: "Delta", desc: "fourth letter", color: "cyan" }
  ];
  diagram.model.linkDataArray = [
    { from: "Beta", to: "Gamma" },
    { from: "Gamma", to: "Delta" }
  ];

  // initially use the detailed templates
  diagram.nodeTemplate = detailtemplate;

  diagram.addDiagramListener("ViewportBoundsChanged",
    function (e) {
      if (diagram.scale < 0.9) {
        diagram.nodeTemplate = simpletemplate;
      } else {
        diagram.nodeTemplate = detailtemplate;
      }
    });

  myDiagram = diagram;  // make accessible to the HTML buttons

警告：如果您修改模板Map，則不會(huì)通知該地圖已更改。您將需要顯式調(diào)用Diagram.rebuildParts。如果要替換Diagram.nodeTemplate或Diagram.nodeTemplateMap 或“組”或“鏈接”的相應(yīng)屬性，則Diagram屬性設(shè)置器將自動(dòng)調(diào)用Diagram.rebuildParts。

在圖中替換一個(gè)或多個(gè)模板時(shí)，將自動(dòng)再次執(zhí)行布局。