Javascript 如何在Gojs中从滚动表中删除一行?

Javascript 如何在Gojs中从滚动表中删除一行?,javascript,gojs,Javascript,Gojs,我在Gojs中使用滚动表在两个表(比如输入和输出表)的行之间绘制链接。输入和输出表都是使用Gojs中的滚动表功能绘制的 现在我想从输出表中删除一行,但从技术上讲,我还没有找到任何方法,因为每个表都充当一个Gojs节点,当我单击一行时,它会选择整个表(节点),而不是特定的行 这是我的密码: var nodeJson; var $ = go.GraphObject.make; var inputFieldTable = [ { ID: "001

我在Gojs中使用滚动表在两个表(比如输入和输出表)的行之间绘制链接。输入和输出表都是使用Gojs中的滚动表功能绘制的

现在我想从输出表中删除一行,但从技术上讲,我还没有找到任何方法,因为每个表都充当一个Gojs节点,当我单击一行时,它会选择整个表(节点),而不是特定的行

这是我的密码:

var nodeJson;
        var $ = go.GraphObject.make;
        var inputFieldTable = [
            { ID: "001", Name: "Input 1", Text: "Err1" },
            { ID: "002", Name: "Input 2", Text: "Err2" },
            { ID: "003", Name: "Input 3", Text: "Err3" },
            { ID: "004", Name: "Input 4", Text: "Err4" },
            { ID: "005", Name: "Input 5", Text: "Err5" },
            { ID: "006", Name: "Input 6", Text: "Err6" },
            { ID: "007", Name: "Input 7", Text: "Err7" }
        ];

        var outputFieldTable = [
            { ID: "101", Name: "Output 1", Text: "Integer" },
            { ID: "102", Name: "Output 2", Text: "Integer" },
            { ID: "103", Name: "Output 3", Text: "Integer" },
            { ID: "104", Name: "Output 4", Text: "String" },
            { ID: "105", Name: "Output 5", Text: "String" },
            { ID: "106", Name: "Output 6", Text: "Double" },
            { ID: "107", Name: "Output 7", Text: "Multivalue" }
        ];
        myDiagram =
            $(go.Diagram, "myDiagramDiv",
                {
                    initialContentAlignment: go.Spot.Center,
                    "undoManager.isEnabled": true,
                    allowMove: false,
                    allowDelete: true,
                    allowCopy: false,
                    allowDragOut: false,
                    allowDrop: false
                });

        myDiagram.nodeTemplate =
            $(go.Node, "Vertical",
                {
                    selectionObjectName: "SCROLLING",
                    resizable: false, resizeObjectName: "SCROLLING",
                    portSpreading: go.Node.SpreadingNone
                },
                new go.Binding("location").makeTwoWay(),
                $(go.TextBlock,
                    { font: "bold 14px sans-serif" },
                    new go.Binding("text", "key")),
                $(go.Panel, "Auto",
                    $(go.Shape, { fill: "white" }),
                    $("ScrollingTable",
                        { stretch: go.GraphObject.Fill },
                        new go.Binding("TABLE.itemArray", "items"),
                        new go.Binding("TABLE.column", "left", function (left) { return left ? 2 : 0; }),
                        new go.Binding("desiredSize", "size").makeTwoWay(),
                        {
                            name: "SCROLLING",
                            desiredSize: new go.Size(100, 100),
                            "TABLE.itemTemplate":
                            $(go.Panel, "TableRow",
                                {
                                    defaultStretch: go.GraphObject.Horizontal,
                                    fromSpot: go.Spot.LeftRightSides,
                                    toSpot: go.Spot.LeftRightSides,
                                    fromLinkable: true,
                                    toLinkable: true,
                                    //allowDelete: true,
                                    //isGroup: true,
                                },
                                new go.Binding("portId", "Name"),
                                $(go.TextBlock, { column: 1 }, new go.Binding("text", "Name")),
                                $(go.TextBlock, { column: 2 }, new go.Binding("text", "Text"))
                            ),
                            "TABLE.defaultColumnSeparatorStroke": "gray",
                            "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
                            "TABLE.defaultRowSeparatorStroke": "gray",
                            "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
                            "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
                        }
                    )
                )
            );

        myDiagram.model = $(go.GraphLinksModel,
            {
                linkFromPortIdProperty: "fromPort",
                linkToPortIdProperty: "toPort",
                nodeDataArray: [
                    {
                        key: "Input", left: true, location: new go.Point(0, 0), size: new go.Size(170, 100),
                        items: inputFieldTable
                    },
                    {
                        key: "Output", location: new go.Point(300, 0), size: new go.Size(170, 100),
                        items: outputFieldTable
                    }
                ]
            });
演示如何做到这一点


基本上,您支持高亮显示单个字段,并跟踪节点中高亮显示的字段,从而有效地形成所有高亮显示字段的集合。然后,您可以覆盖CommandHandler.deleteSelection方法来删除所选字段(如果有),而不是删除所选节点。

谢谢。CommandHandler.deleteSelection对此有帮助。