Tree Google闭包库-向树节点添加非树节点子节点

我正在使用googleclosure库和goog.ui.tree构建一个树结构的GUI组件。它在开箱即用的情况下运行得非常好，但是我想在每个叶子上添加一些额外的控件（特别是goog.ui.checkbox）

问题是Component.addChild已在BaseNode中被重写，因此每个添加的子节点都被视为子树节点，而不是子组件。实际上，如果您尝试将实际树节点以外的任何内容添加为子节点，就会抛出大量错误，因为这些子节点被遍历，并且对它们调用了特定于BaseNode的函数

我必须承认我是一个新手，但我想一定有一些解决办法，对吗？基本上，我所要做的就是在我树的每一片叶子旁边都显示一堆复选框

谢谢，

---

Andreas

除了我对您的问题所作的更一般性的评论之外，我在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)

---

除了我对您的问题留下的更一般性的评论之外，我在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)

---

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

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

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

这个组件的实现有点糟糕

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();

---

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

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

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

这个组件的实现有点糟糕

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();

---

嗨，Andreas，我很好奇你是否想过将stock TreeNode子类化以包含你需要的额外UI？我认为你应该能够在树中添加一个TreeNode子类而不会出现问题。嗨，Andreas，我很好奇你是否想过将stock TreeNode子类化以包含你需要的额外UI？我想你应该能够在树中添加一个TreeNode子类而不会出现问题。谢谢Adam，这真的很有用，我听不懂！我只是好奇我是否能够通过插入html来充分利用Checkbox类。我之前尝试过重写TreeNode的createDom（）方法来插入一些html div，然后使用这些div的ID来标识要传递给复选框的render（）方法的元素。问题是，由于树在默认情况下没有展开，html没有呈现，因此无法在render（）中使用（在展开父级并显示叶子之前，div根本不存在）。感谢Adam，这真的很有用，我忘了！我只是好奇我是否能够通过插入html来充分利用Checkbox类。我之前尝试过重写TreeNode的createDom（）方法来插入一些html div，然后使用这些div的ID来标识要传递给复选框的render（）方法的元素。问题是，由于树在默认情况下未展开，因此html未呈现，因此无法在render（）中使用（在展开父级并显示叶子之前，div根本不存在）。