2017-07-20 13 views
0

我正在使用Gojs中的滚动表格。 我已经为我的表设置了属性“editable:true”。现在,假设我在一行的任何一列中编辑了一个文本,那么如何获取整行或编辑文本的数据呢? 如果你知道这一点,请让我知道。如何在编辑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" } 
     ]; 

     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 
        } 
       } 

      }); 

回答

1

您是否问过如何从“TextEdited”侦听器中获取项目数据?

  • e.subject将是编辑TextBlock的
  • e.subject.panel将包含面板,这是您的Panel.itemTemplate中的“TableRow”。
  • e.subject.panel.data将是项目数据 - 即该行的数据。

这适用于所有使用itemArrays的面板 - 不仅仅是在“ScrollingTable”中。

这是一个有点奇怪的TextBlock.editable的TextBlock不是有一个双向绑定,但它可以根据你在“TextEdited”听众做什么即可。

+0

+1快速回复@Walter。实际上,我想要获取正在编辑文本的行的数据,以便我可以找到唯一的键值,然后在此表的NodeDataArray中执行一些操作。 您的答案足以让我检索行数据。谢谢 –

0

你必须通过调用下面

myDiagram.model.nodeDataArray 

你然后需要通过对象迭代来从模型中的所有值确定哪些值已经改变。

+0

感谢您的回复,但我知道这一点。实际上nodeDataArray包含整个数据。但是我想要编辑文本的特定行的数据。 –

相关问题