GoJs中g(shù)o.Panel的itemArray屬性怎么使用

這篇文章主要介紹了GoJs中g(shù)o.Panel的itemArray屬性怎么使用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇GoJs中g(shù)o.Panel的itemArray屬性怎么使用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

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í)的需求開(kāi)發(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后面直接寫(xiě)對(duì)應(yīng)的配置項(xiàng)。這里推薦第一種方式，因?yàn)閷?xiě)在內(nèi)部的話會(huì)把整個(gè)節(jié)點(diǎn)配置模板顯得很亂。而在上面的示例中使用的go.Shape和go.TextBlock來(lái)示例說(shuō)明，在實(shí)際開(kāi)發(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ú)法顯示

關(guān)于“GoJs中g(shù)o.Panel的itemArray屬性怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“GoJs中g(shù)o.Panel的itemArray屬性怎么使用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。