GoJs中go.Panel的itemArray屬性怎么使用

這篇文章主要介紹了GoJs中go.Panel的itemArray屬性怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇GoJs中go.Panel的itemArray屬性怎么使用文章都會有所收獲，下面我們一起來看看吧。

itemArray屬性的使用

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

//data
nodes: [
    {
      key: 1,
      text:"三國",
      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")
  )
)
);

可以看出在節點內部如果出現了很多樣式和顯示位置都相同的元素，也就是渲染列表。就可以使用itemArray屬性。然后配置的屬性值必須為數組,否則則會報錯。

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

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

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")
      )
    )
  );

由此可以發現，可以給go.Panel配置itemTemplate屬性。在配置nodeTemplate屬性的時候，有兩種方式,第一種是我們在nodeTemplate重新聲明模板，或者是直接nodeTemplate后面直接寫對應的配置項。這里推薦第一種方式，因為寫在內部的話會把整個節點配置模板顯得很亂。而在上面的示例中使用的go.Shape和go.TextBlock來示例說明，在實際開發中可以使用更多的繪圖模板在其內部進行配置。

內部多個繪圖模板的不同列的行循環

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

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")
  )
)
);

這種情況的列表鍵值對的形式，可以在itemTemplate配置其面板屬性為TableRow，只需要配置column第幾列的繪圖模板，這個是時候行就會進行循環展示，還可以對每一列的屬性通過go.Binding進行動態配置屬性的顯示。

注意:itemTemplate內部設置TableRow的時候,其外部的go.Panel屬性必須是Table,否則將無法顯示

關于“GoJs中go.Panel的itemArray屬性怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“GoJs中go.Panel的itemArray屬性怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。