在 Gojs 中编辑滚动 table 行中的任何文本时,如何获取行值?
How can I get the row value when edit any text in row of scrolling table in Gojs?
我正在 Gojs 中使用滚动 table。
我为 table 设置了 属性 "editable: true"。现在,假设我已经编辑了一行中任意一列的文本,那么如何获取整行或编辑文本的数据呢?
如果你知道这个,请告诉我。
这是我的代码:
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
}
}
});
您必须通过调用以下命令从模型中获取所有值
myDiagram.model.nodeDataArray
然后您需要遍历对象以确定更改了哪些值。
您是在询问如何从 "TextEdited" 侦听器中获取项目数据吗?
e.subject
将是编辑后的 TextBlock.
e.subject.panel
将是包含 的面板 ,它是 Panel.itemTemplate[=28= 中的 "TableRow" ].
e.subject.panel.data
将是项目数据——即该行的数据。
这适用于所有带有 itemArrays 的面板 -- 而不仅仅是 "ScrollingTable"。
TextBlock.editable TextBlock 没有 TwoWay Binding 有点奇怪,但可以确定关于您在 "TextEdited" 侦听器中所做的事情。
我正在 Gojs 中使用滚动 table。 我为 table 设置了 属性 "editable: true"。现在,假设我已经编辑了一行中任意一列的文本,那么如何获取整行或编辑文本的数据呢? 如果你知道这个,请告诉我。
这是我的代码:
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
}
}
});
您必须通过调用以下命令从模型中获取所有值
myDiagram.model.nodeDataArray
然后您需要遍历对象以确定更改了哪些值。
您是在询问如何从 "TextEdited" 侦听器中获取项目数据吗?
e.subject
将是编辑后的 TextBlock.e.subject.panel
将是包含 的面板 ,它是 Panel.itemTemplate[=28= 中的 "TableRow" ].e.subject.panel.data
将是项目数据——即该行的数据。
这适用于所有带有 itemArrays 的面板 -- 而不仅仅是 "ScrollingTable"。
TextBlock.editable TextBlock 没有 TwoWay Binding 有点奇怪,但可以确定关于您在 "TextEdited" 侦听器中所做的事情。