html表格类泳道图插件,向泳道中的每个节点添加CSS或样式（GOjs库）

diagram.nodeTemplate =

$(go.Node, "Auto",

$(go.Shape, "Rectangle",

new go.Binding("fill", "color")),

$(go.TextBlock,

{ margin: 5 },

new go.Binding("text", "key"))

);

diagram.model.nodeDataArray = [

{ key: "Alpha", color: "lightblue" }

];

在泳道示例它们具有以下相关代码：

myDiagram.nodeTemplate =

$(go.Node, "Auto",

$(go.Shape, "Rectangle",

{ fill: "white", portId: "", cursor: "pointer", fromLinkable: true, toLinkable: true }),

$(go.TextBlock, { margin: 5 },

new go.Binding("text", "key")),

// limit dragging of Nodes to stay within the containing Group, defined above

{

dragComputation: stayInGroup,

mouseDrop: function (e, node) { // dropping a copy of some Nodes and Links onto this Node adds them to this Node's Group

if (!e.shift && !e.control) return; // cannot change groups with an unmodified drag-and-drop

var grp = node.containingGroup;

if (grp !== null) {

var ok = grp.addMembers(node.diagram.selection, true);

if (!ok) grp.diagram.currentTool.doCancel();

}

},

layoutConditions: go.Part.LayoutAdded | go.Part.LayoutNodeSized

}

);

myDiagram.model = new go.GraphLinksModel(

[ // node data

{ key: "Lane1", isGroup: true, color: "lightblue" },

{ key: "Lane2", isGroup: true, color: "lightgreen" },

{ key: "Lane3", isGroup: true, color: "lightyellow" },

{ key: "Lane4", isGroup: true, color: "orange" },

{ key: "oneA", group: "Lane1" },

{ key: "oneB", group: "Lane1" },

{ key: "oneC", group: "Lane1" },

{ key: "oneD", group: "Lane1" },

{ key: "twoA", group: "Lane2" },

{ key: "twoB", group: "Lane2" },

{ key: "twoC", group: "Lane2" },

{ key: "twoD", group: "Lane2" },

{ key: "twoE", group: "Lane2" },

{ key: "twoF", group: "Lane2" },

{ key: "twoG", group: "Lane2" },

{ key: "fourA", group: "Lane4" },

{ key: "fourB", group: "Lane4" },

{ key: "fourC", group: "Lane4" },

{ key: "fourD", group: "Lane4" },

],

[ // link data

{ from: "oneA", to: "oneB" },

{ from: "oneA", to: "oneC" },

{ from: "oneB", to: "oneD" },

{ from: "oneC", to: "oneD" },

{ from: "twoA", to: "twoB" },

{ from: "twoA", to: "twoC" },

{ from: "twoA", to: "twoF" },

{ from: "twoB", to: "twoD" },

{ from: "twoC", to: "twoD" },

{ from: "twoD", to: "twoG" },

{ from: "twoE", to: "twoG" },

{ from: "twoF", to: "twoG" },

{ from: "fourA", to: "fourB" },

{ from: "fourB", to: "fourC" },

{ from: "fourC", to: "fourD" }

]);

为了让每个节点自身填充颜色更改线路

{ fill: "white", portId: "", cursor: "pointer", fromLinkable: true, toLinkable: true }),

到

{ fill: "lightblue", portId: "", cursor: "pointer", fromLinkable: true, toLinkable: true },

new go.Binding("fill", "color")),

做出这些更改后，您可以指定节点数据中所需的填充颜色。请注意，我将上面的原始填充值更改为lighblue。现在lightblue将成为默认的颜色，如果你不指定节点的颜色(fourD会lightblue)：

myDiagram.model = new go.GraphLinksModel(

[ // node data

{ key: "Lane1", isGroup: true, color: "lightblue" },

{ key: "Lane2", isGroup: true, color: "lightgreen" },

{ key: "Lane3", isGroup: true, color: "lightyellow" },

{ key: "Lane4", isGroup: true, color: "orange" },

{ key: "oneA", group: "Lane1", color: "green" },

{ key: "oneB", group: "Lane1", color: "red" },

{ key: "oneC", group: "Lane1", color: "yellow" },

{ key: "oneD", group: "Lane1", color: "purple" },

{ key: "twoA", group: "Lane2", color: "orange" },

{ key: "twoB", group: "Lane2", color: "green" },

{ key: "twoC", group: "Lane2", color: "red" },

{ key: "twoD", group: "Lane2", color: "yellow" },

{ key: "twoE", group: "Lane2", color: "purple" },

{ key: "twoF", group: "Lane2", color: "orange" },

{ key: "twoG", group: "Lane2", color: "green" },

{ key: "fourA", group: "Lane4", color: "red" },

{ key: "fourB", group: "Lane4", color: "yellow" },

{ key: "fourC", group: "Lane4", color: "purple" },

{ key: "fourD", group: "Lane4" },

],

[ // link data

{ from: "oneA", to: "oneB" },

{ from: "oneA", to: "oneC" },

{ from: "oneB", to: "oneD" },

{ from: "oneC", to: "oneD" },

{ from: "twoA", to: "twoB" },

{ from: "twoA", to: "twoC" },

{ from: "twoA", to: "twoF" },

{ from: "twoB", to: "twoD" },

{ from: "twoC", to: "twoD" },

{ from: "twoD", to: "twoG" },

{ from: "twoE", to: "twoG" },

{ from: "twoF", to: "twoG" },

{ from: "fourA", to: "fourB" },

{ from: "fourB", to: "fourC" },

{ from: "fourC", to: "fourD" }

]);