一文详解GoJs中go.Panel的itemArray属性

更新时间：2023年05月05日 10:23:33 作者：沅芷湘兰

这篇文章主要为大家介绍了一文详解GoJs中go.Panel的itemArray属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

上一篇文章中，为了演示go.panel内部元素的折叠展开，也是为了举例子比较简单。使用了一个go.Panel的属性itemArray，本文将详细的介绍一下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,否则将无法显示

总结

对于类似vue中v-for的渲染列表，在gojs内部也同样存在，通过itemArray属性来配置一个数组进行渲染，如果需要配置的属性过多，也可以在节点内配置多个属性，然后再itemTemplate绘图模板中进行解构出来就可以了。除了上述几种示例之外，也可以把其他的绘图模板例如go.Group、go.Picture等等汇聚到itemTemplate里面。

以上就是一文详解GoJs中go.Panel的itemArray属性的详细内容，更多关于GoJs go.Panel itemArray属性的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

bootstrap实现轮播图效果
这篇文章主要为大家详细介绍了bootstrap实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
详解js跨域原理以及2种解决方案
这篇文章主要介绍了js跨域原理以及解决方案，跨域问题是由于javascript语言安全限制中的同源策略造成的，想要进一步了解跨域的朋友可以参考本文进行学习
2015-12-12
用js判断是否为360浏览器的实现代码
这篇文章主要介绍了用js判断是否为360浏览器的实现代码,有时候我们需要判断是否为360浏览器，包括百度联盟后台就有这样的提示需要的朋友可以参考下
2015-01-01
Javascript 实现复制（Copy）动作方法大全
现在浏览器种类也越来越多，诸如 IE、Firefox、Chrome、Safari等等，因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了。
2014-06-06
移动端效果之Swiper详解
这篇文章主要为大家详细介绍了移动端效果之Swiper的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
测试你的JS的掌握程度的代码
先不讲文章的主题是什么，大家先来做做这些题目，看你能做对多少。这也是反映了你对JS基础知识的掌握程度！
2009-12-12
浅谈js中的this问题
下面小编就为大家带来一篇浅谈js中的this问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
使用JavaScrip模拟实现仿京东搜索框功能
使用js模拟实现京东的搜索框，主要用了js中的onfocus(注册焦点事件)，onblur(失去焦点的事件)；本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-10-10
JavaScript验证Email(3种方法)
这篇文章主要介绍了JavaScript验证Email的3种方法，需要的朋友可以参考下
2015-09-09
CSS javascript 结合实现悬浮固定菜单效果
本篇文章给大家介绍基于CSS javascript 结合实现悬浮固定菜单效果，附有源码下载，需要的朋友可以参考下
2015-08-08