流程圖控件GoJS教程：面板項目數(shù)組（下）
GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
GoJS現(xiàn)已更新至最新版本2.0.16發(fā)布，修復(fù)了一些bug，增強用戶體驗，趕快下載試試吧~
不同的面板類型
盡管具有項數(shù)組的Panel通常類型為Panel.Vertical，但是您可以使用其他支持可變數(shù)量元素的面板類型。最常見的類型是Panel.Vertical，Panel.Horizontal，Panel.Table和Panel.Position。使用Panel.Viewbox面板沒有意義，因為該面板類型僅支持單個元素。
如果面板類型為Panel.Spot，Panel.Auto或Panel.Link，則假定面板的第一個子元素是“主要”對象，除創(chuàng)建的所有嵌套面板之外，第一個子元素將保留為第一個子元素。用于Panel.itemArray中的值。
這是一個水平面板的示例：
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
{ fill: "gold" }),
$(go.Panel, "Horizontal",
{ margin: 4 }, new go.Binding("itemArray", "a"),
{ itemTemplate:
$(go.Panel, "Auto",
{ margin: 2 },
$(go.Shape, "RoundedRectangle",
{ fill: "white" }),
$(go.TextBlock, new go.Binding("text", ""),
{ margin: 2 })
) // end of itemTemplate
})
);
diagram.model =
$(go.GraphLinksModel,
{ nodeDataArray: [
{ key: "n1", a: [ 23, 17, 45, 21 ] },
{ key: "n2", a: [ 1, 2, 3, 4, 5 ] }
], linkDataArray: [
{ from: "n1", to: "n2" }
]
}
);
當(dāng)使用面板類型的Panel.Table作為容器，它是司空見慣的使用項模板即類型的Panel.TableRow或Panel.TableColumn。這是為模板中的元素指定單獨的列或行索引的唯一方法。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "lightgray" }),
$(go.Panel, "Table", new go.Binding("itemArray", "people"),
{ margin: 4, defaultAlignment: go.Spot.Left, itemTemplate:
$(go.Panel, "TableRow", new go.Binding("background", "back"),
$(go.TextBlock, new go.Binding("text", "name"),
{ column: 0, margin: 2, font: "bold 10pt sans-serif" }),
$(go.TextBlock, new go.Binding("text", "phone"),
{ column: 1, margin: 2 }),
$(go.TextBlock, new go.Binding("text", "loc"),
{ column: 2, margin: 2 })
) // end of itemTemplate
})
);
diagram.model =
$(go.GraphLinksModel,
{ nodeDataArray: [
{ key: "group1", people: [
{ name: "Alice", phone: "2345", loc: "C4-E18" },
{ name: "Bob", phone: "9876", loc: "E1-B34", back: "red" },
{ name: "Carol", phone: "1111", loc: "C4-E23" },
{ name: "Ted", phone: "2222", loc: "C4-E197" }
] },
{ key: "group2", people: [
{ name: "Robert", phone: "5656", loc: "B1-A27" },
{ name: "Natalie", phone: "5698", loc: "B1-B6" }
] }
], linkDataArray: [
{ from: "group1", to: "group2" }
]
}
);
請注意，在這種情況下，項目模板具有TableRow Panel的Panel.background屬性到項目數(shù)據(jù)的“ back”屬性的數(shù)據(jù)綁定。
有時有人想要獲取特定項目的行，或者有人想要具有屬性值取決于行索引。您始終可以依賴Panel.itemIndex的值來獲取該屬性。如果項Panel的類型為Panel.TableRow，則項Panel的GraphObject.row屬性也將設(shè)置為從零開始的行號，因此您可以通過找到該Panel的代碼來訪問它。如果itemTemplate是Panel.TableColumn Panel ，則GraphObject.column也是如此。
因為在為Array項數(shù)據(jù)創(chuàng)建項面板時設(shè)置了該屬性，所以您可以創(chuàng)建Binding，其中源是該“ row”屬性：new go.Binding("targetProperty", "row", function(i) { return ...; }).ofObject()。下面的示例演示如果行是偶數(shù)，則將Panel.background屬性綁定為淺綠色。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white" }),
$(go.Panel, "Table", new go.Binding("itemArray", "people"),
{ defaultAlignment: go.Spot.Left, itemTemplate:
$(go.Panel, "TableRow", new go.Binding("background", "row", function(i) { return i%2 === 0 ? "lightgreen" : "transparent" })
.ofObject(),
$(go.TextBlock, new go.Binding("text", "name"),
{ column: 0, margin: 2, font: "bold 10pt sans-serif" }),
$(go.TextBlock, new go.Binding("text", "phone"),
{ column: 1, margin: 2 }),
$(go.TextBlock, new go.Binding("text", "loc"),
{ column: 2, margin: 2 }),
$("Button",
{ column: 3, margin: new go.Margin(0, 1, 0, 0), click: function(e, obj) { // OBJ is this Button Panel;
// find the TableRow Panel containing it
var itempanel = obj.panel;
alert("Clicked on row " + itempanel.row + " for " + itempanel.data.name);
}
},
$(go.Shape, "FivePointedStar",
{ desiredSize: new go.Size(8, 8) })
)
) // end of itemTemplate
})
);
diagram.model =
$(go.GraphLinksModel,
{ nodeDataArray: [
{ key: "group1", people: [
{ name: "Alice", phone: "2345", loc: "C4-E18" },
{ name: "Bob", phone: "9876", loc: "E1-B34" },
{ name: "Carol", phone: "1111", loc: "C4-E23" },
{ name: "Ted", phone: "2222", loc: "C4-E197" },
{ name: "Robert", phone: "5656", loc: "B1-A27" },
{ name: "Natalie", phone: "5698", loc: "B1-B6" }
] }
]
}
);
項目模板中的“按鈕”面板還演示了如何獲取特定的行索引以及項目面板綁定到的數(shù)據(jù)。
為表面板具有不同標(biāo)題的自然方法是讓第一行（即第一項）保存標(biāo)題的數(shù)據(jù)，但是要采用不同的樣式。如果您想要這種行為，則需要使用多個模板-請參見“ 模板映射”中的示例。
相反，如果您希望表標(biāo)題是“固定的”并且不依賴于項Array數(shù)據(jù)，則可以在“表”面板中只有一個“ TableRow”（或“ TableColumn”）面板，如果使用Panel.isPanelMain，則保留該面板是真的。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white" }),
$(go.Panel, "Table", new go.Binding("itemArray", "people"),
{ defaultAlignment: go.Spot.Left, defaultColumnSeparatorStroke: "black", itemTemplate: // the row created for each item in the itemArray
$(go.Panel, "TableRow",
$(go.TextBlock, new go.Binding("text", "name"),
{ column: 0, margin: 2, font: "bold 10pt sans-serif" }),
$(go.TextBlock, new go.Binding("text", "phone"),
{ column: 1, margin: 2 }),
$(go.TextBlock, new go.Binding("text", "loc"),
{ column: 2, margin: 2 })
)
}, // define the header as a literal row in the table,
// not bound to any item, but bound to Node data
$(go.Panel, "TableRow",
{ isPanelMain: true }, // needed to keep this element when itemArray gets an Array
$(go.TextBlock, "Person",
{ column: 0, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" }),
$(go.TextBlock, "Phone",
{ column: 1, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" }),
$(go.TextBlock, "Location",
{ column: 2, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" })
),
$(go.RowColumnDefinition,
{ row: 0, background: "lightgray" }),
$(go.RowColumnDefinition,
{ row: 1, separatorStroke: "black" })
)
);
diagram.model =
$(go.GraphLinksModel,
{ nodeDataArray: [
{ key: "group1", people: [
{ name: "Alice", phone: "2345", loc: "C4-E18" },
{ name: "Bob", phone: "9876", loc: "E1-B34" },
{ name: "Carol", phone: "1111", loc: "C4-E23" },
{ name: "Ted", phone: "2222", loc: "C4-E197" },
{ name: "Robert", phone: "5656", loc: "B1-A27" },
{ name: "Natalie", phone: "5698", loc: "B1-B6" }
] }
]
}
);
在這種情況下，常量頭元素（即節(jié)點模板中的文字“ TableRow” Panel）將具有一個GraphObject.row == 0和一個NaN 的Panel.itemIndex。與第一個項目數(shù)據(jù)相對應(yīng)的“ TableRow”面板panel.itemArray[0]將具有GraphObject.row == 1，與它在Panel.elements列表中的位置匹配。但是它將具有Panel.itemIndex == 0，與它在itemArray中的位置匹配。
模型中的數(shù)組
復(fù)制數(shù)據(jù)綁定的Part時，也必須復(fù)制Part的Part.data（必須是JavaScript對象）。正常的復(fù)制方法Model.copyNodeData會對原始數(shù)據(jù)對象進(jìn)行淺表復(fù)制。
但是，這可能不是數(shù)組的預(yù)期行為。使用項目數(shù)組時，通常不希望在節(jié)點的副本之間共享這些數(shù)組。如果未正確復(fù)制節(jié)點數(shù)據(jù)，則可能會發(fā)生意外行為。因此，當(dāng)您使用項目數(shù)組并允許用戶復(fù)制節(jié)點時，需要確保復(fù)制了此類數(shù)組及其對象。對于最簡單的情況，將Model.copiesArrays和Model.copiesArrayObjects設(shè)置為true 可能就足夠了。更一般而言，您可能需要實現(xiàn)自己的節(jié)點數(shù)據(jù)復(fù)印機功能并將其分配給Model.copyNodeDataFunction。
動態(tài)端口示例證明了這一點，該示例不僅需要復(fù)制每個節(jié)點數(shù)據(jù)所保存的四個項數(shù)組，而且還需要復(fù)制每個數(shù)組中的每個對象。在該示例中，在加載到圖中的模型的JSON格式表示中，將Model.copiesArrays和Model.copiesArrayObjects屬性設(shè)置為true。
對于GraphLinksModel，鏈接數(shù)據(jù)也有一個類似的成員：GraphLinksModel.copyLinkData方法和GraphLinksModel.copyLinkDataFunction屬性。
如果您需要動態(tài)修改項目數(shù)據(jù)的屬性值，請調(diào)用Model.setDataProperty，就像處理節(jié)點數(shù)據(jù)或鏈接數(shù)據(jù)一樣。如果您需要添加或刪除項目數(shù)組中的項目，請調(diào)用Model.insertArrayItem或Model.removeArrayItem方法。=====================================================
想要購買GoJS正版授權(quán)的朋友可以。
更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線