Google Closure Library - 将非 TreeNode 子级添加到 TreeNode

发布于 2024-08-29 07:45:17 字数 379 浏览 11 评论 0原文

我特别使用 Google Closure Library 和 goog.ui.tree 来构建树形结构 GUI 组件。它开箱即用,效果很好,但我想为每个叶子添加一些额外的控件(特别是 goog.ui.Checkboxes)。

问题在于 Component.addChild 已在 BaseNode 中被重写,因此每个添加的子项都被视为子树节点,而不是子组件。实际上,如果您尝试添加除实际树节点之外的任何其他内容作为子节点,则会引发大量错误,因为会遍历这些子节点并对它们调用特定于 BaseNode 的函数。

我必须承认我是一个 Closure 新手,但我认为必须有一些解决方法,对吗?本质上,我想做的就是在树中的每片叶子旁边出现一堆复选框。

谢谢, 安德烈亚斯

I'm using the Google Closure Library and goog.ui.tree in particular to build a tree structure GUI component. It works pretty well out of the box, but I'd like to add a few extra controls to each of the leaves (goog.ui.Checkboxes in particular).

The problem is that Component.addChild has been overridden in BaseNode so that each added child is treated as a child tree node as opposed to a child component. In effect plenty of errors are thrown if you try to add anything else than an actual tree node as a child, as these children are traversed and BaseNode-specific functions are called on them.

I must admit I'm quite a Closure newb, but I reckon there must be some workaround for this, right? Essentially all I want to do is have a bunch of checkboxes appear next to each leaf in my tree.

Thanks,
Andreas

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

烟燃烟灭 2024-09-05 07:45:17

除了我对您的问题留下的更一般性评论之外,我在 goog.ui.tree.BaseNode 上发现了以下属性,可以满足简单的需求:

/**
 * Html that can appear after the label (so not inside the anchor).
 * @type {string}
 * @private
 */
goog.ui.tree.BaseNode.prototype.afterLabelHtml_ = '';

可以使用以下方式设置:

/**
 * Sets the html that appears after the label. This is useful if you want to
 * put extra UI on the row of the label but not inside the anchor tag.
 * @param {string} html The html.
 */
goog.ui.tree.BaseNode.prototype.setAfterLabelHtml = function(html)

In addition to the more general comment I left on your question, I found the following property on goog.ui.tree.BaseNode that may work for simple needs:

/**
 * Html that can appear after the label (so not inside the anchor).
 * @type {string}
 * @private
 */
goog.ui.tree.BaseNode.prototype.afterLabelHtml_ = '';

This can be set using:

/**
 * Sets the html that appears after the label. This is useful if you want to
 * put extra UI on the row of the label but not inside the anchor tag.
 * @param {string} html The html.
 */
goog.ui.tree.BaseNode.prototype.setAfterLabelHtml = function(html)
水水月牙 2024-09-05 07:45:17

看起来 TreeNode 父类实现 - goog.ui.tree.BaseNode - 违反了与祖先类 Component 相关的一些约定。

很明显,goog.ui.tree.BaseNode.addChildAt 方法重写更改了父规范,因为它忽略了 render 布尔属性。

解决方法是通过展开您立即需要使用的树节点来强制渲染。之后您可以再次折叠它们。

这个组件的实现有点糟糕。

tree = new goog.ui.tree.TreeControl( 'dammed useless node if show root = false' );
tree.setShowRootNode( false );
tree.render(); // at doc body

ref = new goog.ui.tree.TreeNode( 'click me' );
tree.add( ref );
tree.expandAll();
// now you can attach your checkbox
cb = new goog.ui.Checkbox( true );
cb.renderBefore( ref.getLabelElement() );
tree.collapseAll();

Looks like the TreeNode parent class implementation - goog.ui.tree.BaseNode - has violated some contract related to the ancestor class Component.

It is clear that goog.ui.tree.BaseNode.addChildAt method override changed the parent specification since it ignores the render boolean attribute.

The work around is to force the rendering by expanding the tree nodes that you need immediately for use. After you can collapse them again.

Implementation is a little bit crappy for this component.

tree = new goog.ui.tree.TreeControl( 'dammed useless node if show root = false' );
tree.setShowRootNode( false );
tree.render(); // at doc body

ref = new goog.ui.tree.TreeNode( 'click me' );
tree.add( ref );
tree.expandAll();
// now you can attach your checkbox
cb = new goog.ui.Checkbox( true );
cb.renderBefore( ref.getLabelElement() );
tree.collapseAll();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文