流程圖控件GoJS教程：面板項目數組（上）

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

GoJS現已更新至最新版本2.0.16發布，修復了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

如何通過將數據綁定到JavaScript數組來顯示節點中可變數量的元素？答案很簡單：只需綁定（或設置）Panel.itemArray即可。該小組，因為有在結合陣列值將包含盡可能多的元素。

簡單的物品清單

這是一個非常簡單的示例，展示了將Panel.itemArray綁定到值為Array的數據屬性的標準方法。

 diagram.nodeTemplate =
    $(go.Node, "Vertical",
      new go.Binding("itemArray", "items"));
  diagram.model =
    $(go.GraphLinksModel,
      {
        nodeDataArray: [
          { key: 1, items: [ "Alpha", "Beta", "Gamma", "Delta" ] },
          { key: 2, items: [ "first", "second", "third" ] }
        ],
        linkDataArray: [
          { from: 1, to: 2 }
        ]

請注意，Panel.itemArray屬性幾乎總是綁定到某些數據屬性，該數據屬性始終以Array作為其值。除非您期望從模板復制的所有零件始終具有完全相同的不變列表，否則不要將文字或構造的Array用作模板中Panel.itemArray屬性的初始值。

與大多數數據綁定一樣，數據屬性的名稱并不重要。在此示例中，屬性名稱為“ items”，但您可以使用適合您應用程序的任何名稱。節點或鏈接中還可以有多個項目數組。

項目模板

您可以通過指定Panel.itemTemplate來定制為每個數組項創建的元素。模板必須是Panel的實例。綁定數組中的每個項目都將獲得此Panel的副本，該副本將通過Panel.itemArray添加到Panel中。所述Panel.data將在陣列的項目，因此，所有的正常數據綁定功能可用來定制每個項目面板。

模板和數據綁定的使用類似于基于模型中的節點數據數組在圖中自動創建Node的方式。Diagram.nodeTemplate的值必須始終為Node或簡單Part；Panel.itemTemplate的值必須始終為Panel，而不能為Part。

請注意，Panel.itemArray中的每個項目都可以是任何JavaScript值，包括字符串和數字。這與Model.nodeDataArray持有的值不同，后者必須全部為JavaScript對象。在此示例中，Panel.data項的值可以是字符串。該Part.data值將始終是一個對象。

這是Panel.itemTemplate的簡單自定義，使用與上述相同的模型。請注意，在這種情況下，綁定構造函數的第二個參數是空字符串，因為字符串（和數字）沒有很多有用的屬性。

diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "#3AA7A3" }),
      $(go.Panel, "Vertical",
        new go.Binding("itemArray", "items"),
        {
          itemTemplate:
            $(go.Panel, "Auto",
              { margin: 2 },
              $(go.Shape, "RoundedRectangle",
                { fill: "#91E3E0" }),
              $(go.TextBlock, new go.Binding("text", ""),
                { margin: 2 })
            )  // end of itemTemplate
        })
    );
  diagram.model =
    $(go.GraphLinksModel,
      {
        nodeDataArray: [
          { key: 1, items: [ "Alpha", "Beta", "Gamma", "Delta" ] },
          { key: 2, items: [ "first", "second", "third" ] }
        ],
        linkDataArray: [
          { from: 1, to: 2 }
        ]
      }
    );

但是，即使綁定到字符串或數字，也可以使用轉換器來獲取所需的綁定值。

當然，如果數組項是Object，則可以像在Diagram.nodeTemplate中一樣引用它們的屬性。與節點數據一樣，您可以使用自己喜歡的任何屬性名稱，根據應用程序的需要在項目數據上擁有任意多個屬性。使用數據綁定自動使用這些屬性值來自定義項目面板的外觀和行為。

diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "#3AA7A3" }),
      $(go.Panel, "Vertical",
        new go.Binding("itemArray", "items"),
        {
          itemTemplate:
            $(go.Panel, "Auto",
              { margin: 2 },
              $(go.Shape, "RoundedRectangle",
                { fill: "#91E3E0" },
                new go.Binding("fill", "c")),
              $(go.TextBlock, new go.Binding("text", "t"),
                { margin: 2 })
            )
        })
    );
  diagram.model =
    $(go.GraphLinksModel,
      {
        nodeDataArray: [
          {
            key: 1,
            items: [
              { t: "Alpha", c: "orange" },
              { t: "Beta" },
              { t: "Gamma", c: "green" },
              { t: "Delta", c: "yellow" }
            ]
          },
          {
            key: 2,
            items: [
              { t: "first", c: "red" },
              { t: "second", c: "cyan" },
              { t: "third" }
            ]
          }
        ],
        linkDataArray: [
          { from: 1, to: 2 }
        ]
      }
    );

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

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

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼