Question

我正在使用Google Closure Library构建一棵树。现在我想让节点在一次鼠标点击时展开，但我似乎没有让它工作。

我尝试过调用goog.ui.component.EventType.SELECT，但它不起作用。

在我的树组件类中，我添加了以下事件：

goog.events.listen(item, [goog.ui.Component.EventType.SELECT, goog.ui.tree.BaseNode.EventType.EXPAND], this.dispatchEvent, false, this);

在我班上调用我添加的功能：

goog.events.listen(this._tree, [goog.ui.Component.EventType.SELECT, goog.ui.tree.BaseNode.EventType.EXPAND], this.treeClick, false, this)

有关如何通过单击扩展节点的任何建议吗？

Answer 1

我看到BaseNode搞砸了任何点击事件：

/**
 * Handles a click event.
 * @param {!goog.events.BrowserEvent} e The browser event.
 * @protected
 * @suppress {underscore}
 */
goog.ui.tree.BaseNode.prototype.onClick_ = goog.events.Event.preventDefault;

将此代码添加到goog / demos / tree / demo.html：

   goog.ui.tree.BaseNode.prototype.onClick_ = function (e) {
       var qq = this.expanded_?this.collapse():this.expand();
   };

树控件只需单击一下即可展开和折叠。

试图扩展goog.ui.tree.TreeControl并覆盖createNode以返回一个自定义的goog.ui.tree.TreeNode，它会覆盖onClick，但在没有出现错误的情况下无法执行此操作。理论上，您可以创建自定义TreeControl，只需单击一下即可展开和折叠。

如果你想支持不可折叠的内容和其他功能，我猜你必须触发某种事件，而不是只是扩展或缩小TreeNode。

<强> [更新]

经过一些小小的尝试后，我通过继承TreeControl来实现它，TreeNode将以下代码添加到goog / demos / tree / demo.html

/**
 * This creates a myTreeControl object. A tree control provides a way to
 * view a hierarchical set of data.
 * @param {string} html The HTML content of the node label.
 * @param {Object=} opt_config The configuration for the tree. See
 *    goog.ui.tree.TreeControl.defaultConfig. If not specified, a default config
 *    will be used.
 * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
 * @constructor
 * @extends {goog.ui.tree.BaseNode}
 */
  var myTreeControl = function (html, opt_config, opt_domHelper) {
      goog.ui.tree.TreeControl.call(this, html, opt_config, opt_domHelper);
  };
  goog.inherits(myTreeControl, goog.ui.tree.TreeControl);
  /**
   * Creates a new myTreeNode using the same config as the root.
   * myTreeNode responds on single clicks
   * @param {string} html The html content of the node label.
   * @return {goog.ui.tree.TreeNode} The new item.
   * @override
   */
  myTreeControl.prototype.createNode = function (html) {
      return new myTreeNode(html || '', this.getConfig(),
          this.getDomHelper());
  };
/**
 * A single node in the myTreeControl.
 * @param {string} html The html content of the node label.
 * @param {Object=} opt_config The configuration for the tree. See
 *    goog.ui.tree.TreeControl.defaultConfig. If not specified, a default config
 *    will be used.
 * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
 * @constructor
 * @extends {goog.ui.tree.BaseNode}
 */
 var myTreeNode = function (html, opt_config, opt_domHelper) {
      goog.ui.tree.TreeNode.call(this,html, opt_config, opt_domHelper)
  }
  goog.inherits(myTreeNode, goog.ui.tree.TreeNode);
  /**
   * Handles a click event.
   * @param {!goog.events.BrowserEvent} e The browser event.
   * @override
   */
  myTreeNode.prototype.onClick_ = function (e) {
      goog.base(this, "onClick_", e);
      this.onDoubleClick_(e);
  };

更改了树变量的创建：

tree = new myTreeControl('root', treeConfig);

单次点击工作，没有注意到任何其他事情。我已经添加了注释，因此编译起来更容易。您可以将声明放在一个带有goog.provide的单独文件中。

TreeControl的handleMouseEvent_为private太糟糕了，或者您只是覆盖那个但不能更改TreeControl源或获取编译错误/警告。 Ach wel，jammer。

如何在good.ui.tree.Basenode上调用事件类型？

1 个答案: