91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2023-05-04 16:09:39 來源:億速云 閱讀:87 作者:iii 欄目:開發技術

這篇文章主要介紹了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")
  )
)
);

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

可以看出在節點內部如果出現了很多樣式和顯示位置都相同的元素,也就是渲染列表。就可以使用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")
      )
    )
  );

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

由此可以發現,可以給go.Panel配置itemTemplate屬性。在配置nodeTemplate屬性的時候,有兩種方式,第一種是我們在nodeTemplate重新聲明模板,或者是直接nodeTemplate后面直接寫對應的配置項。這里推薦第一種方式,因為寫在內部的話會把整個節點配置模板顯得很亂。而在上面的示例中使用的go.Shapego.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")
  )
)
);

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

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

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

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

玉山县| 玛多县| 甘孜| 石景山区| 泰来县| 罗源县| 长白| 广丰县| 宁化县| 石林| 周口市| 盘山县| 凤山县| 安平县| 祁门县| 南充市| 社会| 偏关县| 通山县| 康马县| 江孜县| 平山县| 卢龙县| 宁武县| 礼泉县| 姚安县| 双峰县| 沭阳县| 交城县| 长武县| 青阳县| 喀喇沁旗| 松潘县| 定陶县| 建昌县| 扶绥县| 凌源市| 巫山县| 乡宁县| 渑池县| 南郑县|