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 をオーバーライドして、onClick をオーバーライドするカスタム goog.ui.tree.TreeNode を返そうとしましたが、エラーが発生せずに実行できませんでした。理論的には、ワンクリックで展開および縮小するカスタム 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 に答える