Actualmente, las bandas se ejecutan dinámicamente en el diseño de árbol en bandas. Cuando no hay datos sobre los nodos en la banda, la banda es completamente invisible.
P 1: ¿Cómo puedo hacer que la parte del encabezado esté siempre visible incluso si la banda relacionada está vacía? P 2: ¿Cómo cambio los colores de fondo de los encabezados individualmente?
myDiagram.nodeTemplateMap.add("VerticalBands", $(go.Part, "Position", { isLayoutPositioned: false, // but still in document bounds locationSpot: new go.Spot(0, 0, 0, 30), // account for header height layerName: "Background", pickable: false, selectable: false, itemTemplate: $(go.Panel, "Vertical", new go.Binding("opacity", "visible", function (v) { return v ? 1 : 0; }), new go.Binding("position", "bounds", function (b) { return b.position; }), $(go.TextBlock, { verticalAlignment: go.Spot.Center, textAlign: "center", background: headerColor, wrap: go.TextBlock.None, font: "12pt 'Open Sans', Arial, sans-serif", stroke: "transparent", height: 30, }, new go.Binding("text"), new go.Binding("width", "bounds", function (r) { return r.width; })), // for rectangular bands: $(go.Shape, { stroke: null, strokeWidth: 0 }, new go.Binding("desiredSize", "bounds", function (r) { return r.size; }), new go.Binding("fill", "itemIndex", function (i) { return i % 2 == 0 ? "#ececec" : "whitesmoke" ; }).ofObject()), ) }, new go.Binding("itemArray") )); myDiagram.model = new go.TreeModel(nodearray);
}
// update the background object holding the visual "bands" var bands = this.diagram.findPartForKey("_BANDS"); if (bands) { var model = this.diagram.model; bands.location = this.arrangementOrigin.copy().add(offset); // make each band visible or not, depending on whether there is a layer for it for (var it = bands.elements; it.next();) { var idx = it.key; var elt = it.value; // the item panel representing a band elt.visible = idx < layerRects.length; } // set the bounds of each band via data binding of the "bounds" property var arr = bands.data.itemArray; for (var i = 0; i < layerRects.length; i++) { var itemdata = arr[i]; if (itemdata) { model.setDataProperty(itemdata, "bounds", layerRects[i]); } } }