一文詳解GoJs中g(shù)o.Panel的itemArray屬性

更新時(shí)間：2023年05月05日 10:23:33 作者：沅芷湘蘭

這篇文章主要為大家介紹了一文詳解GoJs中g(shù)o.Panel的itemArray屬性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

上一篇文章中，為了演示go.panel內(nèi)部元素的折疊展開，也是為了舉例子比較簡(jiǎn)單。使用了一個(gè)go.Panel的屬性itemArray，本文將詳細(xì)的介紹一下itemArray屬性。

itemArray屬性的使用

只包含一種繪圖模板的渲染列表

//data
nodes: [
    {
      key: 1,
      text:"三國(guó)",
      list1: ["魏", "蜀", "吳"]
    },
],
//methods
this.myDiagram.nodeTemplate = $$(
go.Node,
"Auto",
$$(go.Shape, "Rectangle", { fill: "#67B73C",width:100,height:100 }),
$$(
  go.Panel,
  "Table",
  { column: 0 },
  $$(go.TextBlock, {
    column: 0,
    margin: new go.Margin(3, 3, 0, 3),
    font: "bold 12pt sans-serif",
  },new go.Binding("text", "text")),
  $$("PanelExpanderButton", "LIST1", { column: 1 }),
  $$(
    go.Panel,
    "Vertical",
    { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
    new go.Binding("itemArray", "list1")
  )
)
);

可以看出在節(jié)點(diǎn)內(nèi)部如果出現(xiàn)了很多樣式和顯示位置都相同的元素，也就是渲染列表。就可以使用itemArray屬性。然后配置的屬性值必須為數(shù)組,否則則會(huì)報(bào)錯(cuò)。

包含不同的繪圖模板的渲染列表

在真實(shí)的需求開發(fā)中，可能在需要處理的渲染列表中不是只有一種繪圖模板。需要有其他的繪圖模板配合使用,這時(shí)就需要結(jié)合itemTemplate屬性進(jìn)行結(jié)合使用。其使用方法如下

let itemTemplates = $$(go.Panel, "Auto",
    { margin: 2 },
    $$(go.Shape, "RoundedRectangle",
    { fill: "#FF9900" }),
    $$(go.TextBlock, new go.Binding("text", ""),
    { margin: 2 })
)
this.myDiagram.nodeTemplate = $$(
    go.Node,
    "Auto",
    $$(go.Shape, "Rectangle", { fill: "#67B73C",width:150,height:150 }),
    $$(
      go.Panel,
      "Table",
      { column: 0 },
      $$(go.TextBlock, {
        column: 0,
        margin: new go.Margin(3, 3, 0, 3),
        font: "bold 12pt sans-serif",
      },new go.Binding("text", "text")),
      $$("PanelExpanderButton", "LIST1", { column: 1 }),
      $$(
        go.Panel,
        "Vertical",
        { name: "LIST1", row: 1, column: 0, columnSpan: 2,itemTemplate:itemTemplates },
        new go.Binding("itemArray", "list1")
      )
    )
  );

由此可以發(fā)現(xiàn)，可以給go.Panel配置itemTemplate屬性。在配置nodeTemplate屬性的時(shí)候，有兩種方式,第一種是我們?cè)?code>nodeTemplate重新聲明模板，或者是直接nodeTemplate后面直接寫對(duì)應(yīng)的配置項(xiàng)。這里推薦第一種方式，因?yàn)閷懺趦?nèi)部的話會(huì)把整個(gè)節(jié)點(diǎn)配置模板顯得很亂。而在上面的示例中使用的go.Shape和go.TextBlock來(lái)示例說(shuō)明，在實(shí)際開發(fā)中可以使用更多的繪圖模板在其內(nèi)部進(jìn)行配置。

內(nèi)部多個(gè)繪圖模板的不同列的行循環(huán)

在很多時(shí)候，對(duì)渲染列表的展示主要是以一種key、value的鍵值對(duì)的形式表現(xiàn)。而事實(shí)上會(huì)有很多鍵值對(duì)以表格的形式進(jìn)行展示，并且我們還可以配置不同其他屬性，下面是配置了stroke屬性的鍵值對(duì)配列。示例如下

let itemTemplates = $$(go.Panel, "TableRow",
    $$(go.TextBlock, new go.Binding("text", "name"),new go.Binding("stroke", "color"),
    { column: 0, margin: 2, font: "bold 10pt sans-serif" }),
    $$(go.TextBlock, new go.Binding("text", "info"),new go.Binding("stroke", "color"),
    { column: 1, margin: 2 }),
)
this.myDiagram.nodeTemplate = $$(
go.Node,
"Auto",
$$(go.Shape, "Rectangle", { fill: "#67B73C",width:150,height:150 }),
$$(
  go.Panel,
  "Table",
  $$(go.TextBlock, {
    column: 0,
    margin: new go.Margin(3, 3, 0, 3),
    font: "bold 12pt sans-serif",
  },new go.Binding("text", "text")),
  $$("PanelExpanderButton", "LIST1", { column: 1 }),
  $$(
    go.Panel,
    "Table",
    { name: "LIST1", row: 1, column: 0, columnSpan: 2,itemTemplate:itemTemplates },
    new go.Binding("itemArray", "list1")
  )
)
);

這種情況的列表鍵值對(duì)的形式，可以在itemTemplate配置其面板屬性為TableRow，只需要配置column第幾列的繪圖模板，這個(gè)是時(shí)候行就會(huì)進(jìn)行循環(huán)展示，還可以對(duì)每一列的屬性通過(guò)go.Binding進(jìn)行動(dòng)態(tài)配置屬性的顯示。

注意:itemTemplate內(nèi)部設(shè)置TableRow的時(shí)候,其外部的go.Panel屬性必須是Table,否則將無(wú)法顯示

總結(jié)

對(duì)于類似vue中v-for的渲染列表，在gojs內(nèi)部也同樣存在，通過(guò)itemArray屬性來(lái)配置一個(gè)數(shù)組進(jìn)行渲染，如果需要配置的屬性過(guò)多，也可以在節(jié)點(diǎn)內(nèi)配置多個(gè)屬性，然后再itemTemplate繪圖模板中進(jìn)行解構(gòu)出來(lái)就可以了。除了上述幾種示例之外，也可以把其他的繪圖模板例如go.Group、go.Picture等等匯聚到itemTemplate里面。

以上就是一文詳解GoJs中g(shù)o.Panel的itemArray屬性的詳細(xì)內(nèi)容，更多關(guān)于GoJs go.Panel itemArray屬性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: