GoJS中Panels的Table元素

    GoJS绘制图表一般分为三步：第一步、定义画布；第二步、定义节点；第三步、定义连线。

 

   

如上图所示，如果在节点中我们要绘制一个含有表格的图表，那么这个表格该怎么绘制呢

思路如下：

分成两个部分，第一个部分是蓝色背景的表名部分，第二部分是白色背景的字段部分。

（1）在Diagram的node中定义一个主面板，再在主面板中定义一个table，然后定义table的第一行TableRow为第一部分。

this.myDiagram.nodeTemplate = 
 $(go.Node, 'Auto',
  { locationSpot: go.Spot.Center, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides },
  // 创建一个画板并设置画板的背景色 
  $(go.Panel, 'Auto', { margin: 0, background: '#fff' },  
      // 定义画板的样式
      $(go.Shape, 'Rectangle',
              {
                fill: '#fff', 
                stroke: '#33A7EB', // node边框
                strokeWidth: 3
              }
       ),
       // 表头样式
       $(go.Panel, 'Table',
           { background: '#ffffff' },
           $(go.Panel, 'TableRow', { background: '#E6F7FF' },
              // header
              $(go.Picture,
              // Pictures 应该指定宽高.
              // 当没有图片时显示红色的背景
              // 或者当图片为透明的时候也是.
              { margin: 8, width: 20, height: 20, alignment: go.Spot.Left },
              // Picture.source参数值与模型数据中的"source"字段绑定
              new go.Binding('source')),
              $(go.TextBlock,
                  {
                    alignment: go.Spot.Left,
                    margin: new go.Margin(10, 8, 10, 30),
                    font: '11pt sans-serif', // 表头字体样式调整
                    isMultiline: false,
                    editable: false
                  },
                  new go.Binding('text', 'name').makeTwoWay())
              ),
              // properties
              $(go.TextBlock, 'Properties',
                {
                  font: 'italic 10pt sans-serif'
                },
                new go.Binding('visible', 'visible', function(v) {
                  return !v
                }).ofObject('PROPERTIES')
              ),
              $(go.Panel, 'Table', { name: 'PROPERTIES' },
                new go.Binding('itemArray', 'properties'),
                {
                  row: 1,
                  defaultAlignment: go.Spot.Left, padding: new go.Margin(0, 8, 0, 8), background: '#ffffff',
                  itemTemplate: propertyTemplate
                }
              )
            )
  )
 )

    （2）再定义一个TableRow为第二部分。如图，字段中文名和英文名居左，而字段类型与约束条件居右，所以在这里，又给TableRow分成两列，每列放一个水平的面板,第一列显示字段中文名和英文名且居左，第二列显示字段类型与约束条件且居右。

var propertyTemplate =
          $(go.Panel, 'TableRow',
            $(go.Panel, 'Horizontal',
              { row: 1, column: 1, alignment: go.Spot.Left, margin: new go.Margin(0, 20, 0, 0) },
              $(go.TextBlock,
                { isMultiline: false, editable: false },
                new go.Binding('text', 'fieldName').makeTwoWay(),
                // 字段是否显示高亮
                new go.Binding('stroke', 'isHighlighted', function(h) { return h ? '#f00' : '#333' })
              ),
              $(go.TextBlock,
                { isMultiline: false, editable: false, stroke: '#333', row: 1 },
                new go.Binding('text', 'fieldCineseName').makeTwoWay()
              )
            ),
            $(go.Panel, 'Horizontal', { row: 1, column: 2, alignment: go.Spot.Right, margin: 4 },
              $(go.TextBlock,
                { isMultiline: false, editable: false, stroke: '#333', row: 1 },
                new go.Binding('text', 'type').makeTwoWay()
              ),
              $(go.TextBlock,
                { isMultiline: false, editable: false, stroke: '#333', row: 1 },
                new go.Binding('text', 'length').makeTwoWay()
              )
            ),
            $(go.TextBlock,
              {
                isMultiline: false, editable: false, stroke: '#333', row: 1,
                margin: 4, textAlign: 'end', column: 4, alignment: go.Spot.Right
              },
              new go.Binding('text', 'notNull').makeTwoWay()
            )
          )

接下来，我们说下连线，如上图所示，这里的连线上的文字是用一个蓝色框框起来的。

思路如下：

首先，在Diagram中定义Link,然后设置线的样式，最后定义一个面板来控制文本框。

this.myDiagram.linkTemplate =
          $(go.Link,
            { routing: go.Link.Orthogonal, corner: 0 },
            new go.Binding('isLayoutPositioned', 'relationship', this.convertIsTreeLink),
            $(go.Shape, { strokeWidth: 1, stroke: '#33A7EB', margin: 10 }), // 线的宽度和笔画的颜色
            $(go.Shape, new go.Binding('fromArrow', 'relationship', this.convertFromArrow)),
            $(go.Shape,
              { toArrow: 'standard', stroke: '#33A7EB', fill: '#33A7EB' },
              new go.Binding('toArrow', 'relationship', this.convertToArrow)),
            $(go.Panel, 'Auto',

              $(go.Shape,
                'Rectangle',
                {
                  fill: '#33A7EB',
                  stroke: null,
                  height: 32
                }),

              $(go.TextBlock, 'transition',
                {
                  row: 1,
                  margin: 10,
                  textAlign: 'center',
                  font: '10pt helvetica, arial, sans-serif',
                  editable: false,
                  stroke: '#fff'
                },
                // editing the text automatically updates the model data
                new go.Binding('text').makeTwoWay())
            )
          )

最后，节点画好了，线了画好了，那就是添加数据了。

var name1 = [{key: "a1",
            name: "h_ds_trigger_check",
            properties: [{fieldName: "id"}],
            source: "/static/img/table.png"},
            {key: "a2",
            name: "h_ds_trigger_check",
            properties: [{fieldName: "id"}],
            source: "/static/img/table.png"}]

var name2 = [{from: "a1",
            relationship: "generalization",
            text: "h_task_triggers_ibfk_1",
            to: "a2"}]

var $ = go.GraphObject.make
        // load an initial diagram from some JSON text
        if (_this.myDiagram !== '') {
          _this.myDiagram.model = $(go.GraphLinksModel,
            {
              copiesArrays: true,
              copiesArrayObjects: true,
              nodeDataArray: name1,
              linkDataArray: name2
            })
          _this.searchDiagram()
        }