流程圖控件GoJS教程：面板項(xiàng)目數(shù)組（下）
GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
GoJS現(xiàn)已更新至最新版本2.0.16發(fā)布，修復(fù)了一些bug，增強(qiáng)用戶體驗(yàn)，趕快下載試試吧~
不同的面板類型
盡管具有項(xiàng)數(shù)組的Panel通常類型為Panel.Vertical，但是您可以使用其他支持可變數(shù)量元素的面板類型。最常見的類型是Panel.Vertical，Panel.Horizontal，Panel.Table和Panel.Position。使用Panel.Viewbox面板沒有意義，因?yàn)樵撁姘孱愋蛢H支持單個(gè)元素。
如果面板類型為Panel.Spot，Panel.Auto或Panel.Link，則假定面板的第一個(gè)子元素是“主要”對(duì)象，除創(chuàng)建的所有嵌套面板之外，第一個(gè)子元素將保留為第一個(gè)子元素。用于Panel.itemArray中的值。
這是一個(gè)水平面板的示例：
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作為容器，它是司空見慣的使用項(xiàng)模板即類型的Panel.TableRow或Panel.TableColumn。這是為模板中的元素指定單獨(dú)的列或行索引的唯一方法。
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" }
]
}
);
請(qǐng)注意，在這種情況下，項(xiàng)目模板具有TableRow Panel的Panel.background屬性到項(xiàng)目數(shù)據(jù)的“ back”屬性的數(shù)據(jù)綁定。
有時(shí)有人想要獲取特定項(xiàng)目的行，或者有人想要具有屬性值取決于行索引。您始終可以依賴Panel.itemIndex的值來獲取該屬性。如果項(xiàng)Panel的類型為Panel.TableRow，則項(xiàng)Panel的GraphObject.row屬性也將設(shè)置為從零開始的行號(hào)，因此您可以通過找到該P(yáng)anel的代碼來訪問它。如果itemTemplate是Panel.TableColumn Panel ，則GraphObject.column也是如此。
因?yàn)樵跒锳rray項(xiàng)數(shù)據(jù)創(chuàng)建項(xiàng)面板時(shí)設(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" }
] }
]
}
);
項(xiàng)目模板中的“按鈕”面板還演示了如何獲取特定的行索引以及項(xiàng)目面板綁定到的數(shù)據(jù)。
為表面板具有不同標(biāo)題的自然方法是讓第一行（即第一項(xiàng)）保存標(biāo)題的數(shù)據(jù)，但是要采用不同的樣式。如果您想要這種行為，則需要使用多個(gè)模板-請(qǐng)參見“ 模板映射”中的示例。
相反，如果您希望表標(biāo)題是“固定的”并且不依賴于項(xiàng)Array數(shù)據(jù)，則可以在“表”面板中只有一個(gè)“ 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é)點(diǎn)模板中的文字“ TableRow” Panel）將具有一個(gè)GraphObject.row == 0和一個(gè)NaN 的Panel.itemIndex。與第一個(gè)項(xiàng)目數(shù)據(jù)相對(duì)應(yīng)的“ TableRow”面板panel.itemArray[0]將具有GraphObject.row == 1，與它在Panel.elements列表中的位置匹配。但是它將具有Panel.itemIndex == 0，與它在itemArray中的位置匹配。
模型中的數(shù)組
復(fù)制數(shù)據(jù)綁定的Part時(shí)，也必須復(fù)制Part的Part.data（必須是JavaScript對(duì)象）。正常的復(fù)制方法Model.copyNodeData會(huì)對(duì)原始數(shù)據(jù)對(duì)象進(jìn)行淺表復(fù)制。
但是，這可能不是數(shù)組的預(yù)期行為。使用項(xiàng)目數(shù)組時(shí)，通常不希望在節(jié)點(diǎn)的副本之間共享這些數(shù)組。如果未正確復(fù)制節(jié)點(diǎn)數(shù)據(jù)，則可能會(huì)發(fā)生意外行為。因此，當(dāng)您使用項(xiàng)目數(shù)組并允許用戶復(fù)制節(jié)點(diǎn)時(shí)，需要確保復(fù)制了此類數(shù)組及其對(duì)象。對(duì)于最簡單的情況，將Model.copiesArrays和Model.copiesArrayObjects設(shè)置為true 可能就足夠了。更一般而言，您可能需要實(shí)現(xiàn)自己的節(jié)點(diǎn)數(shù)據(jù)復(fù)印機(jī)功能并將其分配給Model.copyNodeDataFunction。
動(dòng)態(tài)端口示例證明了這一點(diǎn)，該示例不僅需要復(fù)制每個(gè)節(jié)點(diǎn)數(shù)據(jù)所保存的四個(gè)項(xiàng)數(shù)組，而且還需要復(fù)制每個(gè)數(shù)組中的每個(gè)對(duì)象。在該示例中，在加載到圖中的模型的JSON格式表示中，將Model.copiesArrays和Model.copiesArrayObjects屬性設(shè)置為true。
對(duì)于GraphLinksModel，鏈接數(shù)據(jù)也有一個(gè)類似的成員：GraphLinksModel.copyLinkData方法和GraphLinksModel.copyLinkDataFunction屬性。
如果您需要?jiǎng)討B(tài)修改項(xiàng)目數(shù)據(jù)的屬性值，請(qǐng)調(diào)用Model.setDataProperty，就像處理節(jié)點(diǎn)數(shù)據(jù)或鏈接數(shù)據(jù)一樣。如果您需要添加或刪除項(xiàng)目數(shù)組中的項(xiàng)目，請(qǐng)調(diào)用Model.insertArrayItem或Model.removeArrayItem方法。=====================================================
想要購買GoJS正版授權(quán)的朋友可以。
更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線