The order of nodes between cells in a table is not correct


My diagram uses the TableLayout , with each cell being a group and LayeredDigraphLayout. As a result, there is no hierarchy between the two associated nodes.
Can someone give me a solution? please


This is my code:
var myDiagram = (go.Diagram, "myDiagramDiv", { layout : (TableLayout, {
defaultStretch : “horizontal”
}, (go.RowColumnDefinition, { row : 1, height : 30 }), // fixed size column headers (go.RowColumnDefinition, {
column : 1,
width : 100
}) // fixed size row headers
“SelectionMoved” : function(e) {
// “resizingTool” : new LaneResizingTool(),
// feedback that dropping in the background is not allowed
mouseDragOver : function(e) {
e.diagram.currentCursor = “not-allowed”;
// when dropped in the background, not on a Node or a Group, cancel the
// drop
mouseDrop : function(e) {
“animationManager.isInitial” : false,
“undoManager.isEnabled” : true,
// autoScale : go.Diagram.Uniform,
contentAlignment : go.Spot.Center

// cell(group)
myDiagram.groupTemplate = (go.Group, "Auto", { layout: (go.LayeredDigraphLayout, // automatically lay out the lane’s subgraph
isInitial: true, // don’t even do initial layout
isOngoing: true, // don’t invalidate layout when nodes or
direction: 0,
columnSpacing: 10,
setsPortSpots: false,
layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
layerSpacing: 50
avoidable : false,// 必须为false,不然连接线会跨越节点
computesBoundsAfterDrag : true, // needed to prevent recomputing
computesBoundsIncludingLinks : false, // to reduce occurrences of
computesBoundsIncludingLocation : true, // to support empty space at
handlesDragDropForMembers : true, // don’t need to define handlers on
stretch : go.GraphObject.Fill,
selectable : false,
computesBoundsAfterDrag : true,
computesBoundsIncludingLocation : true
}, new go.Binding(“row”), new go.Binding(“column”, “col”), (go.Shape, "Rectangle", { name : "SHAPE", fill : "white", strokeWidth : 0.5, stroke : "#dcdcdc" }, new go.Binding("desiredSize", "size", go.Size.parse) .makeTwoWay(go.Size.stringify)), (go.Placeholder, {
padding : 40,
alignment : go.Spot.TopLeft


It sounds as if you really want to do a single layout across all nodes and links, but you want the node to remain in certain rows. If that is the case, then TableLayout is not for you. Certainly you do not want each cell to have its own group that has its own layout, because that would prevent any organization between nodes in different groups. So I think it would be better not to have any Groups and separate Layouts at all.

Take a look at SwimLaneLayout:


I saw the example you gave me, but I needed both horizontal and vertical headers, so I needed table layout, and I wanted to put nodes in different cells, so I set cells into groups. How can I keep tablelayouts and also have the LayeredDigraphLayout ? Or is there any other way to meet my needs?


As I said, each Group.layout acts independently, so there can be no coordination of layouts between groups. So you cannot use groups. You want the Diagram.layout to be responsible for all nodes and links, but you want to keep nodes in particular rows. The SwimlaneLayout does that. If you also want to draw columns, you can draw the “bands” by overriding LayeredDigraphLayout.commitLayers. See, for example: (although that uses TreeLayout, the same method override and concepts apply).


OK, thank you. I’ll try it.