Comment puis-je obtenir la valeur de la ligne lors de l'édition d'un texte dans la rangée de la table de défilement dans Gojs?

Question

Je travaille avec la table de défilement dans Gojs. J'ai défini la propriété "modifiable: true" pour ma table. Maintenant, supposons que j'ai édité un texte dans n'importe quelle colonne d'une ligne, alors comment puis-je obtenir les données pour cette ligne entière ou le texte édité? S'il vous plaît laissez-moi savoir si vous le savez.

Voici mon 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

Demandez-vous comment accéder aux données de l'article à partir de votre écouteur "TextEdited"?

• e.subject sera l'édition TextBlock.
• e.subject.panel sera le contenant Panneau, qui est un "TableRow" dans votre Panel.itemTemplate.
• e.subject.panel.data seront les données d'article - c'est-à-dire les données pour cette ligne.

Cela s'applique à tous les panneaux avec itemArrays - pas seulement dans un "ScrollingTable".

Il est un peu étrange pour un TextBlock.editable TextBlock ne pas avoir un TwoWay liaison, mais il peut être OK en fonction de ce que vous faites dans votre écouteur « TextEdited ».

Answer 2

vous devez obtenir toutes les valeurs du modèle en appelant le dessous

myDiagram.model.nodeDataArray 

vous aurez alors besoin de parcourir les objets à déterminer quelles valeurs ont changé.