翻譯|使用教程|編輯:吳園園|2019-10-08 11:19:31.720|閱讀 641 次
概述:GoJS是一款功能強(qiáng)大,快速且輕量級(jí)的流程圖控件。本教程將為您介紹面板項(xiàng)目數(shù)組的內(nèi)容。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
GoJS是一款功能強(qiáng)大,快速且輕量級(jí)的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖,且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。
GoJS現(xiàn)已更新至最新版本2.0.16發(fā)布,修復(fù)了一些bug,增強(qiáng)用戶(hù)體驗(yàn),趕快下載試試吧~
如何通過(guò)將數(shù)據(jù)綁定到JavaScript數(shù)組來(lái)顯示節(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ù)屬性的名稱(chēng)并不重要。在此示例中,屬性名稱(chēng)為“ items”,但您可以使用適合您應(yīng)用程序的任何名稱(chēng)。節(jié)點(diǎn)或鏈接中還可以有多個(gè)項(xiàng)目數(shù)組。
項(xiàng)目模板
您可以通過(guò)指定Panel.itemTemplate來(lái)定制為每個(gè)數(shù)組項(xiàng)創(chuàng)建的元素。模板必須是Panel的實(shí)例。綁定數(shù)組中的每個(gè)項(xiàng)目都將獲得此Panel的副本,該副本將通過(guò)Panel.itemArray添加到Panel中。所述Panel.data將在陣列的項(xiàng)目,因此,所有的正常數(shù)據(jù)綁定功能可用來(lái)定制每個(gè)項(xiàng)目面板。
模板和數(shù)據(jù)綁定的使用類(lèi)似于基于模型中的節(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ù)字)沒(méi)有很多有用的屬性。
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)換器來(lái)獲取所需的綁定值。
當(dāng)然,如果數(shù)組項(xiàng)是Object,則可以像在Diagram.nodeTemplate中一樣引用它們的屬性。與節(jié)點(diǎn)數(shù)據(jù)一樣,您可以使用自己喜歡的任何屬性名稱(chēng),根據(jù)應(yīng)用程序的需要在項(xiàng)目數(shù)據(jù)上擁有任意多個(gè)屬性。使用數(shù)據(jù)綁定自動(dòng)使用這些屬性值來(lái)自定義項(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)買(mǎi)GoJS正版授權(quán)的朋友可以。
更多精彩內(nèi)容,歡迎關(guān)注下方的微信公眾號(hào),及時(shí)獲取產(chǎn)品最新資訊▼▼▼

本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: