通过addArrayItem实现，完整示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GoJS Table Example</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
<style>
#myDiagramDiv {
width: 400px;
height: 300px;
border: 1px solid black;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<div id="myDiagramDiv"></div>
<button onclick="addRow()">Add Row</button>
<button onclick="deleteRow()">Delete Row</button>
<script>
function init() {
const $ = go.GraphObject.make;
// 创建 Diagram
const myDiagram = $(go.Diagram, "myDiagramDiv", {
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});
// 定义节点模板
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white" }),
$(go.Panel, "Vertical",
$(go.Panel, "Table",
new go.Binding("itemArray", "items"),
{
defaultRowSeparatorStroke: "black",
itemTemplate: $(go.Panel, "TableRow",
$(go.TextBlock, { margin: 2 },
new go.Binding("text", "name")),
$("Button",
{
margin: 2,
click: function (e, obj) {
const node = obj.part;
if (node !== null) {
const item = obj.panel.data;
node.diagram.startTransaction("remove row");
node.diagram.model.removeArrayItem(node.data.items, node.data.items.indexOf(item));
node.diagram.commitTransaction("remove row");
}
}
},
$(go.TextBlock, "X")
)
)
}
)
)
);
// 初始化模型数据
myDiagram.model = new go.GraphLinksModel([{
key: 1,
items: [
{ name: "Row 1" },
{ name: "Row 2" },
{ name: "Row 3" }
]
}]);
// 全局变量，方便操作
window.myDiagram = myDiagram;
}
function addRow() {
const node = myDiagram.model.nodeDataArray[0];
myDiagram.startTransaction("add row");
myDiagram.model.addArrayItem(node.items, { name: "New Row" });
myDiagram.commitTransaction("add row");
}
function deleteRow() {
const node = myDiagram.model.nodeDataArray[0];
if (node.items.length > 0) {
myDiagram.startTransaction("delete row");
myDiagram.model.removeArrayItem(node.items, node.items.length - 1);
myDiagram.commitTransaction("delete row");
}
}
// 初始化
init();
</script>
</body>
</html> 网友回复
我知道答案，我要回答
私活外包
