[英]how to change text of button in go.js?
我創建了一個按鈕,可以在單擊時展開節點。 但點擊事件后按鈕的文本不會變為減號。
如何僅更改一個節點的單擊事件按鈕的文本?
$("Button", {
cursor: "pointer",
name: 'TREEBUTTON',
width: 20, height: 20,
alignment: go.Spot.TopRight,
alignmentFocus: go.Spot.Center,
// customize the expander behavior to
// create children if the node has never been expanded
click: function (e, obj) { // OBJ is the Button
var node = obj.part; // get the Node containing this Button
if (node === null) return;
e.handled = true;
expandNode(node);
}
}, $(go.TextBlock, "+"));
請注意,您可以在此處看到所有內置按鈕的完整實現,例如 TreeExpanderButton(更改其形狀): https://gojs.net/latest/extensions/Buttons.js
你可以修改它來做你想要的額外的東西。
// This is a complete Button that you can have in a Node template
// to allow the user to collapse/expand the subtree beginning at that Node.
// Typical usage within a Node template:
// $('TreeExpanderButton')
go.GraphObject.defineBuilder('TreeExpanderButton', function (args) {
var button = /** @type {Panel} */ (
go.GraphObject.make('Button',
{ // set these values for the isTreeExpanded binding conversion
'_treeExpandedFigure': 'MinusLine',
'_treeCollapsedFigure': 'PlusLine'
},
go.GraphObject.make(go.Shape, // the icon
{
name: 'ButtonIcon',
figure: 'MinusLine', // default value for isTreeExpanded is true
stroke: '#424242',
strokeWidth: 2,
desiredSize: new go.Size(8, 8)
},
// bind the Shape.figure to the Node.isTreeExpanded value using this converter:
new go.Binding('figure', 'isTreeExpanded',
function (exp, shape) {
var but = shape.panel;
return exp ? but['_treeExpandedFigure'] : but['_treeCollapsedFigure'];
}
).ofObject()
),
// assume initially not visible because there are no links coming out
{ visible: false },
// bind the button visibility to whether it's not a leaf node
new go.Binding('visible', 'isTreeLeaf',
function (leaf) { return !leaf; }
).ofObject()
)
);
// tree expand/collapse behavior
button.click = function (e, btn) {
var node = btn.part;
if (node instanceof go.Adornment) node = node.adornedPart;
if (!(node instanceof go.Node)) return;
var diagram = node.diagram;
if (diagram === null) return;
var cmd = diagram.commandHandler;
if (node.isTreeExpanded) {
if (!cmd.canCollapseTree(node)) return;
} else {
if (!cmd.canExpandTree(node)) return;
}
e.handled = true;
if (node.isTreeExpanded) {
cmd.collapseTree(node);
} else {
cmd.expandTree(node);
}
};
return button;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.