0

我正在使用 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)

关于如何通过单击扩展我的节点有什么建议吗？

4

1 回答 1

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_ 是私有的，否则您将只覆盖那个，但您不能不更改 TreeControl 源或获取编译错误/警告。哎呀，干扰器。

于 2013-06-29T10:03:39.290 回答