Wie kann ich den Zeilenwert erhalten, wenn Sie in Gojs einen beliebigen Text in der Zeile der Scroll-Tabelle bearbeiten?

Question

Ich arbeite mit Scrolltisch in Gojs. Ich habe die Eigenschaft "editierbar: wahr" für meine Tabelle festgelegt. Angenommen, ich habe einen Text in einer beliebigen Spalte einer Zeile bearbeitet. Wie kann ich dann die Daten für diese ganze Zeile oder den bearbeiteten Text erhalten? Bitte lassen Sie mich wissen, wenn Sie das wissen.

Hier ist mein Code:

  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" } 
     ]; 

     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" } 
     ]; 
     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, 
           }, 
           new go.Binding("portId", "Name"), 
           $(go.TextBlock, { column: 1 }, new go.Binding("text", "Name")), 
           $(go.TextBlock, { column: 2 }, new go.Binding("text", "Text"), { editable: true }) 
          ), 
          "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, editable: true 
        } 
       ] 
      }); 

     //Function to handle editing of Scrolling Tables row data 
     myDiagram.addDiagramListener("TextEdited", 
      function (e) { 
       // alert("Text is changed."); 
       var part = e.subject.part;     
       if (part.data.key.toUpperCase() == "INPUT") { 
        myDiagram.rollbackTransaction(); 
        return false; 
       } 
       else if (part.data.key.toUpperCase() == "OUTPUT") { 
        if ((part instanceof go.Node)) { 
         //NEED TO KNOW THE ENTIRE ROW DATA HERE 
        } 
       } 

      }); 

Answer 1

Fragen Sie darüber, wie Sie von Ihrem "TextEdited" Listener zu den Artikeldaten gelangen?

• e.subject wird die bearbeitete TextBlock- sein.
• e.subject.panel wird das enthält -Panel, die eine "TableRow" in Ihrem Panel.itemTemplate ist.
• e.subject.panel.data werden die Artikeldaten sein - d.h. die Daten für diese Reihe.

Dies gilt für alle Panels mit itemArrays - nicht nur in einer "ScrollingTable".

Es ist ein wenig seltsam für ein TextBlock.editable TextBlock- keine TwoWay Bindung zu haben, aber es kann in Ordnung sein, je nachdem, was Sie in Ihren „TextEdited“ Hörer tun.

Answer 2

Sie durch die folgenden

myDiagram.model.nodeDataArray 

Sie

ruft alle Werte aus dem Modell bekommen haben, dann durch die Objekte iterieren müssen, um Bestimmen Sie, welche Werte sich geändert haben.