流程圖控件GoJS教程：面板項(xiàng)目數(shù)組（上）

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

GoJS現(xiàn)已更新至最新版本2.0.16發(fā)布，修復(fù)了一些bug，增強(qiáng)用戶體驗(yàn)，趕快下載試試吧~

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

如何通過將數(shù)據(jù)綁定到JavaScript數(shù)組來顯示節(jié)點(diǎn)中可變數(shù)量的元素？答案很簡(jiǎn)單：只需綁定（或設(shè)置）Panel.itemArray即可。該小組，因?yàn)橛性诮Y(jié)合陣列值將包含盡可能多的元素。

簡(jiǎn)單的物品清單

這是一個(gè)非常簡(jiǎn)單的示例，展示了將Panel.itemArray綁定到值為Array的數(shù)據(jù)屬性的標(biāo)準(zhǔn)方法。

 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 }
        ]

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

與大多數(shù)數(shù)據(jù)綁定一樣，數(shù)據(jù)屬性的名稱并不重要。在此示例中，屬性名稱為“ items”，但您可以使用適合您應(yīng)用程序的任何名稱。節(jié)點(diǎn)或鏈接中還可以有多個(gè)項(xiàng)目數(shù)組。

項(xiàng)目模板

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

模板和數(shù)據(jù)綁定的使用類似于基于模型中的節(jié)點(diǎn)數(shù)據(jù)數(shù)組在圖中自動(dòng)創(chuàng)建Node的方式。Diagram.nodeTemplate的值必須始終為Node或簡(jiǎn)單Part；Panel.itemTemplate的值必須始終為Panel，而不能為Part。

請(qǐng)注意，Panel.itemArray中的每個(gè)項(xiàng)目都可以是任何JavaScript值，包括字符串和數(shù)字。這與Model.nodeDataArray持有的值不同，后者必須全部為JavaScript對(duì)象。在此示例中，Panel.data項(xiàng)的值可以是字符串。該P(yáng)art.data值將始終是一個(gè)對(duì)象。

這是Panel.itemTemplate的簡(jiǎn)單自定義，使用與上述相同的模型。請(qǐng)注意，在這種情況下，綁定構(gòu)造函數(shù)的第二個(gè)參數(shù)是空字符串，因?yàn)樽址ê蛿?shù)字）沒有很多有用的屬性。

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 }
        ]
      }
    );

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

當(dāng)然，如果數(shù)組項(xiàng)是Object，則可以像在Diagram.nodeTemplate中一樣引用它們的屬性。與節(jié)點(diǎn)數(shù)據(jù)一樣，您可以使用自己喜歡的任何屬性名稱，根據(jù)應(yīng)用程序的需要在項(xiàng)目數(shù)據(jù)上擁有任意多個(gè)屬性。使用數(shù)據(jù)綁定自動(dòng)使用這些屬性值來自定義項(xiàng)目面板的外觀和行為。

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 }
        ]
      }
    );

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

想要購(gòu)買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼