流程图控件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正版授权的朋友可以。

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼