如何更改gojs中按钮的文本？答案

【问题标题】：how to change text of button in go.js?如何更改gojs中按钮的文本？
【发布时间】：2020-09-01 13:01:06
【问题描述】：

我创建了一个按钮，可以在单击时展开节点。但是在单击事件之后，按钮的文本不会变为减号。
如何仅更改一个节点的单击事件按钮的文本？

$("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, "+"));

【问题讨论】：

请提供一个您正在使用但不起作用的代码示例。
添加按钮的代码
使用button 而不是Button
按钮工作
如何更改按钮的文字？

标签： javascript jquery gojs

【解决方案1】：

请注意，您可以在此处查看所有内置按钮的完整实现，例如 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;
});

【讨论】：