header 滚动 table gojs 的边框和颜色

Question

下面是代码块，我还包括下面的预期图像和实际图像。我也经历过这个 https://forum.nwoods.com/t/scrolling-table/9707/5 但无法正确理解。

  const $ = GraphObject.make;  // for conciseness in defining templates
  this.loadScrollingTable();
  // This is the function with the ScrollingTable.js code

  this.diagram =
    $(go.Diagram, "myDiagramDiv",
      {
        "PartResized": function(e) {
          var node = e.subject;
          var scroller = node.findObject("SCROLLER");
          if (scroller !== null) scroller._updateScrollBar(scroller.findObject("TABLE"));
        },
        initialDocumentSpot: Spot.Center,
        initialViewportSpot: Spot.Center,
        initialAutoScale: Diagram.Uniform,
        validCycle: Diagram.CycleNotDirected,  // don't allow loops
        'undoManager.isEnabled': true
      });

      // function BindSelection(name, yes, no) {
      //   return new go.Binding(name, "isSelected", function(s) { return s ? yes : no; }).ofObject();
      // }


      this.diagram.nodeTemplate =
      $(go.Node, "Vertical",
      {
        selectionObjectName: "SCROLLER",
        resizable: true, resizeObjectName: "SCROLLER",
        portSpreading: go.Node.SpreadingNone
      },
      new go.Binding("location").makeTwoWay(),
      $(go.TextBlock,
        { font: "bold 14px sans-serif" },
        new go.Binding("text", "key")),
        $(go.Panel, "Auto",
        $(go.Shape, { fill: "white" }),
        // $("TreeExpanderButton",
        // { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
        // { visible: true }),
        $("ScrollingTable",
        {
          name: "SCROLLER",
          desiredSize: new go.Size(NaN, 60),  // fixed width
          stretch: go.GraphObject.Fill,       // but stretches vertically
          defaultColumnSeparatorStroke: "gray",
          defaultColumnSeparatorStrokeWidth: 0.5
        },
          $("TreeExpanderButton",
          { alignment: go.Spot.Top, alignmentFocus: go.Spot.Top, visible: true}),      
          new go.Binding("TABLE.itemArray", "items"),
          new go.Binding("TABLE.column", "left", function(left) { return left ? 2 : 0; }),
          new go.Binding("desiredSize", "size").makeTwoWay(),
          {
            "TABLE.itemTemplate":
              $(go.Panel, "TableRow",
              {
                  defaultStretch: go.GraphObject.Horizontal,
                  fromLinkable: true, toLinkable: true,
                },
                new go.Binding("portId", "name"),
                $(go.TextBlock, { column: 0 }, new go.Binding("text", "name")),
                $(go.TextBlock, { column: 1 }, new go.Binding("text", "value"))
                ),
                "TABLE.defaultColumnSeparatorStroke": "gray",
                "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
                "TABLE.defaultRowSeparatorStroke": "gray",
                "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
                "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
              }
              )
              )
              );

              this.diagram.linkTemplate =
                  $("Link",
                  { routing: go.Link.Orthogonal,  // Orthogonal routing
                    // corner: 10,                 // with rounded corners    
                    relinkableFrom: true, relinkableTo: true, toShortLength: 2},
                   {cursor:"pointer"},
                    $("Shape", { stroke: "#2E68CC", strokeWidth: 2 }),
                    $("Shape", { fill: "#2E68CC", stroke: null, toArrow: "Standard" }),
                    // $(go.Panel, "Auto",
                    //   { margin: 3 },
                    //   $("Button",
                    //   { margin: 2,
                    //     click: this.resJson() })));
                    // $(go.Shape, { strokeWidth: 2 },
                    //   BindSelection("stroke", "dodgerblue", "black")),
                    $(go.TextBlock,
                      { visible:true, editable: true, textAlign: 'center', font: '14px Roboto', segmentOffset: new go.Point(0, -10),
                      segmentOrientation: go.Link.OrientUpright  },
                      new go.Binding("text", "text").makeTwoWay())
                      // BindSelection("stroke", "white", "black"),
                      //   BindSelection("background", "dodgerblue", null)),
                      // $(go.Shape, { toArrow: 'Triangle', scale: 2, strokeWidth: 0 },
                      //   BindSelection("fill", "dodgerblue", "black"))
                  );

              this.diagram.layout = $(go.TreeLayout);

  this.diagram.model = $(go.GraphLinksModel,
    {
      linkFromPortIdProperty: "fromPort",
      linkToPortIdProperty: "toPort",
      nodeDataArray: this.dataArray,
      linkDataArray: this.linkArray
    });
    const tempfromnode =
    $(Node,
        { layerName: 'Tool' },
        $(Shape, 'Rectangle',
            {
                stroke: '#009fe3', strokeWidth: 3, fill: null,
                portId: '', width: 1, height: 1
            })
    );
const temptonode =
    $(Node,
        { layerName: 'Tool' },
        $(Shape, 'Rectangle',
            {
                stroke: '#009fe3', strokeWidth: 3, fill: null,
                portId: '', width: 1, height: 1
            })
    );

this.diagram.toolManager.linkingTool.temporaryFromNode = tempfromnode;
this.diagram.toolManager.linkingTool.temporaryFromPort = tempfromnode.port;
this.diagram.toolManager.linkingTool.temporaryToNode = temptonode;
this.diagram.toolManager.linkingTool.temporaryToPort = temptonode.port;
this.diagram.toolManager.relinkingTool.temporaryFromNode = tempfromnode;
this.diagram.toolManager.relinkingTool.temporaryFromPort = tempfromnode.port;
this.diagram.toolManager.relinkingTool.temporaryToNode = temptonode;
this.diagram.toolManager.relinkingTool.temporaryToPort = temptonode.port;

this.diagram.toolManager.linkingTool.temporaryLink =
    $(Link,
        { layerName: 'Tool' },
        $(Shape,
            { stroke: '#646363', strokeWidth: 2 })
    );
}

我无法为滚动添加边框 table header，下面是当前和预期的图像。而且我还添加了代码块。 https://gojs.net/latest/extensions/scrollingTable.html

Answer 1

只需在那个简单的 TextBlock 周围放置一个边框，并确保它水平拉伸以与节点的其余部分具有相同的宽度。

      myDiagram.nodeTemplate =
        $(go.Node, "Vertical",
          { . . . },
          new go.Binding("location").makeTwoWay(),
          $(go.Panel, "Auto",
            { stretch: go.GraphObject.Horizontal },
            $(go.Shape, { fill: "aqua", strokeWidth: 3 }),
            $(go.TextBlock,
              { margin: 3, font: "bold 14px sans-serif" },
              new go.Binding("text", "key"))
          ),
          . . .

header 滚动 table gojs 的边框和颜色

border and colour for header scrolling table gojs

gojs