通过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> 网友回复
我知道答案，我要回答
私活外包
最新提问
如何破解绕开seedance2.0真人照片生成视频 限制？
python有哪些算法可以将视频中的每个帧图片去除指定区域水印合成新的视频？
iphone的激光雷达数据能否实时传输到three三维空间中？
豆包sora等ai视频生成大模型生成的视频水印如何去除？
python如何实现在电脑上拨号打电话给手机？
具身机器人与人形机器人区别？
nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行？
为啥windows.onerror捕获js错误是这样的{"message":"Script error.","source":"","lineno":0,"colno":0,"stack":null,
2026年ai将全面接管编程？
WebMCP是干啥的？
